Fast & Efficient Parallax Scrolling In Pure CSS – parallax.css

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