© 2024 fjorge. All rights reserved.
Learning to Parallax? That's Stellar!
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