Learning to Parallax? That’s Stellar!

December 27, 2012

New this year was a cool Parallax plugin called Stellar. This is an easy way to get elements moving at different speeds.
After including the JS file and the current jQuery library, initialize the plugin:

$.stellar();

Elements to be parallaxed should have the following structure:

<div data-stellar-ratio="2"></div>
OR
<div data-stellar-background-ratio="0.5"></div>

A ratio of 1 would have no effect. A ratio greater than one will speed it up. A ratio lower than one will slow it down, but may cause the animation to be jerky. If that’s the case, there are some settings available to make it less noticeable.

There are a lot of fun ways to configure the plugin, including offsets, scroll direction, and more. More Information and Demos

Stay in Touch!

Subscribe to our newsletter.

Solutions Architecture

browse through our blog articles

Blog Archive