JQuery Image Image Effect

Question

I am sure that this is impossible, but.,.

I am trying to get a morphing effect (for example, on this page in a flash image rotator → http://www.sikids.com ) in jquery. Or at least an effect that is very similar. I saw that the jquery user interface had some morphing effects, but I could not find it. This is important for our client, so any effect that will be as close as possible will be amazing.

Answer 1

This is not impossible ... but it can be slow.

You will need to use the canvas to capture image data and convert it. Check out this SO answer and this plugin that can help streamline the process. I have not used this plugin, so in IE, you may have to add an additional plugin for the canvas .

Answer 2

Another option, which could be just as slow but would not require any canvases, would be to write a pixelization algorithm using 1x1 images.

The first step would be to reduce the image to a palette of 32 colors.

Then you must map the image to the palette at the initial pixelation level. For example, if the image was 100px by 200px, and the first level pixelization was a 50 by 100 grid, replace the image with 50x100 = 5000, <IMG> each with a background image from the color palette.

This should be done on the server side and passed as a javascript array, which will then be converted to <IMG> :

 image1 = [3, 4, 1, 2, ...]; 

It would be:

 <div id="image1Pixelation"> <img src="image1_3.png" width="2px" height="2px"/> <img src="image1_4.png" width="2px" height="2px"/> <img src="image1_1.png" width="2px" height="2px"/> <img src="image1_2.png" width="2px" height="2px"/> ... </div> 

Then, in javascript, increase some of the <IMG> and reduce the grid by deleting the <IMG> part until some stopping of the increase is reached.

Then replace this with a new high-magnification image and cancel the algorithm for the new image.

Answer 3

For this purpose, a JavaScript library was developed called MorpherJS - this is fully client-side JavaScript. Some demos of MorpherJS can be found here here . It uses the canvas HTML element to display morphing animation animations.