This is a simple parallax effect library incorporating lerp and sideways transformations in order to introduce a modern feel into any webpage. It was built with simplicity in mind, so there are no dependencies or scroll hacks here!
prlx-section
With a mixture of classes and data attributes,
this script allows you to make elements that have start/stop positions, lerp up/down as well as sideways, or just achieve the good ol' parallax effect with relative ease. The elements are moving only when their prlx-section parent, or the element itself comes into the viewport so as to reduce the load on the users device.
Also, the elements will be in their origin position (in other words "0") when their parent element is exactly in the
center of the screen. To check, open the dev tools and inspect the elements while the "center" text is directly in the center
of the moving circle.
center
Set up a container element that will encapsulate the parallax elements, and give it a class name of prlx-section.
When the classes are in place, give each element the speed by which they'll move with the data-prlx-speed="x", where "x" is any number you wish. By adding a negative value, the element will parallax in the opposite direction, and the value of 10 is the scroll speed of the window, so the element will act as if fixed in the viewport.
When you have made the layout per your liking inside the section and want to add parallaxing elements, give them the prlx-element class, and one of the following in order for them to know how to move: prlx-norm, prlx-lerp, or prlx-sideways (which can also lerp with the addition of the with-lerp class).
When you have made the layout per your liking inside the section and want to add parallaxing elements, give them the prlx-element class, and one of the following in order for them to know how to move: prlx-norm, prlx-lerp, or prlx-sideways (which can also lerp with the addition of the with-lerp class).
When the classes are in place, give each element the speed by which they'll move with the data-prlx-speed="x", where "x" is any number you wish. By adding a negative value, the element will parallax in the opposite direction, and the value of 10 is the scroll speed of the window, so the element will act as if fixed in the viewport.
Last but not least, you may stop the elements from moving when they reach a certain point by applying data-prlx-stop-sp="x" or ...stop_ep="x" where
"x" is the value at which the element will stop at, and ..stop-sp/ep stand for start point, end point.
(NOTE: no need to place negative values for either of them, it is taken care of ;)
As of v1.21, you may stop the element at it's parent elements edge by usin ...stop-s, or ...stop-e.
These are calculated by percentage, so data-prlx-stop-s="0" is the top (or left) edge of the parent, and stop-e="100" is the end.
Furthermore, these stop positions are lower priority than the point ones, so ..stop-sp/ep will overwrite them.
And finally, by omitting all stop positions, the element will move without restriction as long as it, or its prlx-section, are in view.
Hope you enjoyed this brief summary, and that you may find this work useful in your future endeavors. Cheers!