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
- 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:
(Try this on an ipad or iphone)
The tool that makes this really simple is called simply parallax.js (http://matthew.wagerfield.com/parallax/).
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);0