loader

Parallax Effect on MouseOver using CSS3 and JavaScript April 23, 2014

It seems all I hear about these days is Parallax, Parallax, Parallax so of course I had to try and see if I could build something using this effect.

par·al·lax – noun
  1. the effect whereby the position or direction of an object appears to differ when viewed from different positions, e.g., through the viewfinder and the lens of a camera.

In my example I am using just one image, a transparent PNG file and in order to add the different effects am using both CSS3 elements and some JQuery.

Instead of animating items as the user scrolls down the page I thought it would be funner to have the animation attached to the mouse or motion on a mobile phone (when available).

First for the example:

https://www.christiangehrke.com/mvnp/volcano/parallax-master/examples/magma.html

(Try this on an ipad or iphone)

The tool that makes this really simple is called simply parallax.js (http://matthew.wagerfield.com/parallax/).

By add this one simple tag to a page and define the element you wish to apply this affect, you can do some pretty amazing things. Once you activate the plugin you can now add more markup on your images (data-depth). This attribute tells the JavaScript how to treat the item when a users mouse moves. If it’s a lower number the motion has a bigger impact. If it’s a higher number it has less impact. This gives the elements a sense of depth.

The example you see above is the same image place inside a list. The different colors, blurs and rotation is all being added by CSS3. You won’t see them if you use Firefox (what the heck Mozilla?).

There are three types of CSS3 elements being used to add more to each layer. I am using Transform, Filter (blur), Filter (hue-rotate). By using CSS3 we reduce the page load because the server is only displaying one image and we let the CSS transform the image. We could have easily used 5 different PNG files each with a different color, blur and rotation but the page would have been 5 times and large and taken much longer to download.

transform:rotate(160deg);
-ms-transform:rotate(160deg); /* IE 9 */
-webkit-transform:rotate(160deg); /* Opera, Chrome, and Safari */
filter: blur(4px);
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: hue-rotate(215deg);
-webkit-filter: hue-rotate(215deg);
-moz-filter: hue-rotate(215deg);
-o-filter: hue-rotate(215deg);
-ms-filter: hue-rotate(215deg);

Christian Gehrke

0

Leave a Reply

Developed by Christian Gehrke