Author: | Matyanson |
---|---|
Views Total: | 796 views |
Official Page: | Go to website |
Last Update: | November 22, 2021 |
License: | MIT |
Preview:

Description:
parallax.css is a CSS library that applies a fast, efficient, customizable parallax scroll effect to elements using pure CSS.
How to use it:
1. Download and import the parallax.css library.
<link rel="stylesheet" href="parallax.css" />
2. Add the prx
attribute to the target element. That’s it.
<div prx> Parallax Element </div>
3. Set the depth of the element (from -10 to 10).
<div prx=5> Parallax Element </div>
/* OR */ .myElement { --p-depth: 5; }
4. Set the animation speed.
.myElement { --p-speed: 3 }
5. The library also allows multiple parallax elements in the same group.
<div class="prx_group"> <div prx>parallax item</div> <div prx>parallax item</div> <div prx>parallax item</div> ... </div>
6. Set the scroll direction: either horizontal or vertical.
<div class="myContainer prx_container_y"> <div prx>parallax item</div> <div prx>parallax item</div> <div prx>parallax item</div> </div> <div class="myContainer prx_container_x"> <div prx>parallax item</div> <div prx>parallax item</div> <div prx>parallax item</div> </div>
7. Set the container size.
.myContainer { --p-container-size: 100vh; }
8. Set the item size.
.myElement { /* value: <number> | 0 - "infinity" */ --p-size: 50; }
9. Set the alignment of the parallax elements.
.myContainer { /* value: <number> | 0 to 100 | right - left, top - bottom */ --p-align: 50; }
10. Fit the element in its size when scrolling.
<img class="prx_fit" prx style="--p-size: 30;" src="1.jpg">
11. Override the global variables.
:root { --p-align: 50; --p-perspective: 5; --p-perspective: 1000; --p-speed: 0.5; --p-depth: calc(var(--p-perspective) * (1 / var(--p-speed) - 1)); --p-scale: 1; --p-transform: ; --p-scrollbar-width: 17px; }
Changelog:
v3.2.1 (11/22/2021)
- setting perspective doesn’t temper with depth of items. & default perspective changed to 1000
v3.2.0 (11/20/2021)
- Update