What on earth is Parallax effect p(*o* )?!

On Wiki, Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines. You don't quite get it, do you? Yea, neither do I. Let's have a look at some examples instead.

Name Description File Size
Parallax-JS Developed by razorfish
A simple vertical page scroller, <section></section> tag is parsed for parallax effect. Side navigation bullet list is automatically generated if side-nav.js is included. One thing that I'm picky of is scrolling between pages doesn't really snap the page to the browser viewable pane. Sample doesn't fully demonstrate the controls offered by the javascript.
19.1 KB
Demo
Superscrollorama Developed by johnpolacek
The webpage has good demonstration of what the script can do, jam packed with scroll animation. It's most suitable for working with font effects.
171.44 KB
Demo
Plax Developed by cameronmcefee
I first saw the parallax effect on github 404 page, and yeap, it's done by him. Lightweight, and does the job well. It's very easy to have parallax effect on elements based on mouse position. Best for moving objects on mouse's movements.
9.23 KB
Demo

I decided to give Plax a quick run on fonts.  Below is the source, remember to put plax.js on the same file path as the html.


Related:

No comments:

Post a Comment