CODEWITHSUNDEEP
javascriptjquerycss
Lieutenant Dan
Lieutenant Dan

Reputation: 8274

Blurry to pixelated custom Fade In

I'm seeking to create a custom fade in with jQuery or JS. I'd like the fade to be exaggerated and go from very blurry, to pixelated, to then the clear crisp image. On page load, one time.

This is for one image. Yes, tradditionaly done via making an animated gif I suppose. But can I write the effect with jQuery?

On page load. Grabbing the image #div >

Image loads blurry > then pixelates in > and then the clear original HQ image resolves.

enter image description here

Upvotes: 9

Views: 10208

Answers (2)

user1693593
user1693593

Reputation:

Demo snapshot

To pixelate an image you can use canvas directly in a simple way like this (here assuming image has already been loaded):

/// get a block size (see demo for this approach)
size = blocks.value / 100,
w = canvas.width * size,
h = canvas.height * size;

/// draw the original image at a fraction of the final size
ctx.drawImage(img, 0, 0, w, h);

/// turn off image aliasing (see comment below)
ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;  /// future

/// enlarge the minimized image to full size    
ctx.drawImage(canvas, 0, 0, w, h, 0, 0, canvas.width, canvas.height);

Here is an online demo.

You can use the slider at the bottom to see various sizes and the speed which would be needed for your transition (use Chrome to see live update when moving the slider) or simply hit the animate button.

As we turn off interpolation (image smoothing) the new enlarged image will appear blocky. This method is also faster than most other approached mainly due to image smoothing can now be turned off in the major browsers.

See this answer for a more complete instruction on how to turn smoothing off in most browsers:
Images in web browser are slightly blurred. How to disable it?

The last drawImage will use a clipped part of the source (here: canvas itself). See here for more details on how to use this method.

As for blur effect I would recommend you to pre-blur the image as this process has a large overhead and the pause will be noticeable on most common computers.

In case you still want to blur the image "live" you can use this stack-blur:
http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

Upvotes: 8

user1234
user1234

Reputation: 8978

You could use Close Pixelate by David DeSandro. The Pixelator is a good example of it in action.

Upvotes: 2

Related Questions