Develop Reference

How to move elements along with a curve and appear one by one by js?

I am trying to match up the word(image one by one) overlap its background which is a curve/arch, and the element should appear consecutively. So far I can only use gif,make the animation, overlap the bg image, I tried slide or other effect but doesn't give the animation i want, please reference some good way to do this instead of gif..
Also, is there any tips that could make the components don't go off but the exact position even with different browser size? Thanks a lot for the help!
$(function(){$('.woodpanel').hide();});
setTimeout(function(){$(".woodpanel").effect('bounce', 1200);},2000);
$(function(){$('.slogantext').hide();});
setTimeout(function(){ $(".slogantext").toggle("slow","top");},2400);
<div class="woodpanel" style="width: 1270px; position:absolute; top:2%;left:50%;margin-left:-635px;text-align: center;">
<img id="woodbg" src="https://app.box.com/shared/static/4hxnuu5nl1m0xtmamx97qh7z0dp99rpo.png"
style="overflow:hidden; margin: 0 auto;"alt="woodbg">
<div class="slogantext" style="overflow:hidden;display:block;position:absolute;margin-top:-235px;margin-left:135px;z-index:7;">
<img src="https://app.box.com/shared/static/hxjovfl51r7ooqs3jm30xp5za97hsph1.gif" alt="woodwordtest"style="width:100%;"></div>
</div>

Html5 image Pixelation load

In my website, images are loaded from top to bottom, how can I change it so the images will load in Pixelation, like on Google Maps when are you zooming in?

Or if you want a pixelating/rendering blur, you could look here: https://www.google.com/amp/s/jmperezperez.com/medium-image-progressive-loading-placeholder/amp/
Here is what is going on:
Render a div where the image will be displayed. Medium uses a with a padding-bottom set to a percentage, which corresponds to the aspect ratio of the image. Thus, they prevent reflows while the images are loaded since everything is rendered in its final position. This has also been referred to as intrinsic placeholders.
Load a tiny version of the image. At the moment, they seem to be requesting small JPEG thumbnails with a very low quality (e.g. 20%). The markup for this small image is returned in the initial HTML as an , so the browser starts fetching them right away.
Once the image is loaded, it is drawn in a . Then, the image data is taken and passed through a custom blur() function You can see it, a bit scrambled, in the main-base.bundle JS file. This function is similar, though not identical, to StackBlur‘s blur function. At the same time, the main image is requested.
Once the main image is loaded, it is shown and the canvas is hidden.
All the transitions are quite smooth, thanks to the CSS animations applied.
An example fromo the page:
<figure name="7012" id="7012" class="graf--figure graf--layoutFillWidth graf-after--h4">
<div class="aspectRatioPlaceholder is-locked">
<div class="aspect-ratio-fill" style="padding-bottom: 66.7%;"></div>
<div class="progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded" data-image-id="1*sg-uLNm73whmdOgKlrQdZA.jpeg" data-width="2000" data-height="1333" data-scroll="native">
<img src="https://cdn-images-1.medium.com/freeze/max/27/1*sg-uLNm73whmdOgKlrQdZA.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail">
<canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="47"></canvas>
<img class="progressiveMedia-image js-progressiveMedia-image __web-inspector-hide-shortcut__" data-src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg" src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg">
<noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg"></noscript>
</div>
</div>
</figure>
Or you could check out this CodePen That JMPerez set up, in an atempt to recreate the effect himself.
I'm sorry about my first answer if its not what you were looking for.

Rotating 2 or More Images Individually

I desperately need to figure out how to be able to rotate 2 items (images, texts, etc.) on a page individually (e.g. NOT at the same time). Here's an example of what I'm talking about, but on this page, there is only 1 item (an image). When I try to duplicate the image, and then rotate it, both images end up rotating simultaneously: http://testerski.antaranian.me/
Can someone please, please, please show me the code for having the items rotate on their own? Thank you!!!

in main.js change to:
$(document).ready(function(){
$('#cc-element-1').rotatable();
$('#cc-element-2').rotatable();
});
add in your html:
<span id="cc-element-2" class="cc-element ui-draggable cc-active" style="-webkit-transform: rotate(0deg);" >
<img src="shirt.png" style="height: 197.35365477846602px; width: 265.1019243292827px;" >
</span>
Should work now. You should show your code cause i'm making an assumption of what you need to fix.

Generate frame for picture

I creating gallery, and I want to create frame around the picture.
But this picture must be scalable. Width and height of this frame generated by width and height of image.
And must to have possibility to change height of frame through the JavaScript.
Thanks.
PS: First of all, I must to have possibility to make frame narrow through the JavaScript.

If I was you I would make sure I can reuse (repeat) images, and then I will do it like that:
<div id="frame">
<div id="top-left"></div>
<div id="top"></div>
<div id="top-right"></div>
<div id="left"></div>
<div id="imageSpace"></div>
<div id="right"></div>
<div id="bottom-left"></div>
<div id="bottom"></div>
<div id="bottom-right"></div>
</div>
where: #top-left, #top-right, #bottom-left, #bottom-right are using corner images as backgrounds and have both width and height set.
And #top, #right, #bottom, #left are using repeated image for their backgrounds.
Check attached image where I put lines where you should cut original frame-image.
This method will allow you to change width of #top / #bottom and #left / #right to increase the size of your frame.

This can be quite tricky to pull off.
If you are using modern browsers that support CANVAS, check out this demo that does what you are looking for: CANVAS Demo
Otherwise you will need to create 8 images (4 corners, and 4 sides) where the sides are made in such a way as they can be tiled to adjust to whatever size you need.
The next trick is how you build the frame. You could by hand create DIVs/Tables around your pictures to create this affect but that would be very bulky and not very clean. Your best bet would be to use jQuery (or your favorite lib) to hook into all images on the page with a CSS class (e.g. "fancyFrame"), and wrap them as needed with HTML markup that makes use of the images you created above via CSS.

Narrowing the frame with Javascript is the easiest part, really.
Once you have your HTML/CSS set up so that it already scales you can just set the width with Javascript like this:
var photo = document.getElementById('photoFrame');
photo.width = '200px';

You can use A List Apart's Drop Shadow technique which uses CSS and PNGs to create automatically resizeable drop shadow for images. You can modify technique to create a resizeable frame.
You would need four divs and four images. The corners would need to be cut at 45 degree angles with transparency:
Image 1 - Top-left corner and top and left sides of the frame.
Image 2 - Top-right corner and right side of frame.
Image 3 - Bottom-left corner and bottom of frame
Image 4 - Bottom-right corner of frame

Funny, I had to do this exact thing when I worked at ImageKind.com. For reference, if you go to the frame shop there, such as this one, go to Step 4 (Add Mats) and click Adjust Width, there's a slider that does more or less what you're describing.
I originally had a couple of nested DIVs with big opposing L-shaped frame pieces as background images. A little Firebug inspection shows they've changed it to be a table. More efficient I'm sure, as the side pieces can tile.

How does Bing.com create enlarged thumbnails?

When I search images using Bing.com, I realize their images are well cropped and sorted. When you place your mouse on an image, another window will pop up with an enlarged image.
http://www.bing.com/images/search?q=Heros&FORM=BIFD#
I want to do the same thing in my program. I checked the source code of their page. They are using javascript, but still I have no clue how they make it. Does anyone familiar with it? Any suggestion is welcomed.

If you look at the HTML, you'll see a span immediately above each of the images. It sets that frame's display style from "none" to "block". It then uses an animation library to resize the content of the covering frame.

It's the same image. It just enlarges it slightly.

Here's a simple HTML/CSS/Javascript example on changing the display property of an element with javascript:
HTML:
<div id="image1" class="image" onmouseover="showImg(1);">
Here's the small image
</div>
<div id="bigImage1" class="bigImage" onmouseout"hideImg(1);">
Here's the enlarged image and info about the picture
</div>
Javascript:
function showImg(num){
document.getElementById('bigImage' + num).style.display='block';
}
function hideImg(num){
document.getElementById('bigImage' + num).style.display='none';
}
CSS:
.bigImage{
display:none
}
They also use a fancy transition thing like scriptaculous's effect-grow found here.