Sort of like the effect here in this pen from Sarah Drasner:ĬodePen Embed Fallback Here’s how it works The trees far away seems to slowly drift by where the fence right along the road zips quickly by. Imagine looking out the window from a moving car. Oftentimes scrolling effects are called parallax meaning some elements are made to look like they are deep in the background, making them appear to move slower than other elements that are closer to the foreground while scrolling is taking place. In other words, it detects when elements are in the viewport and then alters CSS transform property values on those elements to create scrolling effects. Locomotive scroll is a simple scroll library, built as a layer on top of ayamflow’s virtual-scroll, it provides smooth scrolling with support for parallax effects, toggling classes, and triggering event listeners when elements are in the viewport. Let’s look at the basics of using Locomotive-Scroll JavaScript and how to leverage it to for delightful user experiences. The homepage will give you a good sense of how it works and feels. You could probably consider this “scrolljacking” so if you hate that generally, you might hate this, but UX research seems rather mixed on whether it’s actually bad or not. You might also call it a “smooth scrolling” library, but it doesn’t leverage native smooth scrolling - it does just the opposite by virtualizing scrolling and ensuring it’s always smooth. It lets you perform a variety of scrolling effects, like parallax and triggering/controlling animations at scroll points. I was recently looking for a way to perform scrolling effects on a project and I stumbled on the Locomotive S croll library.
0 Comments
Leave a Reply. |