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 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.
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 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!