Smooth Parallax Scrolling Background Image In Pure CSS Library

parallax.css is a CSS library that applies a fast, efficient, and customizable parallax scrolling effect to elements using pure CSS.

parallax scrolling css, smooth parallax scrolling background image, pure css parallax background image, simple parallax scrolling, parallax scrolling css tricks

How to make use of it:

1. Download and import the parallax.css library.

<link rel="stylesheet" href="parallax.css" />

2. Add the prx attribute to the target element.

<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. Adjust animation speed.

.myElement {
  --p-speed: 3
}

5. The library also allows multiple parallax elements in the same collection.

<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: 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. Adjust the alignment of parallax elements.

.myContainer {
  /* value: <number> | 0 to 100 | right - left, top - bottom */
  --p-align: 50;
}

10. Fits the item to its size when hovered.

<img class="prx_fit" prx style="--p-size: 30;" src="1.jpg">

Fast & Efficient Parallax Scrolling In Pure CSS, parallax.css Plugin/Github, 3d parallax effect css, css parallax generator


See Demo And Download

Official Website(Matyanson): Click Here

This superior jQuery/javascript plugin is developed by Matyanson. For extra Advanced Usage, please go to the official website.

Share