Parallax Scrolling Effect For Single Or Multiple Layers – shadowllax

Preview:

Description:

shadowllax is a tiny JavaScript parallax library that applies a subtle parallax scrolling effect to a single or multiple layers.

How to use it:

1. To get started, insert the shadowllax.css and shadowllax.js into the document.

<link rel="stylesheet" href="./shadowllax.css" />
<script src="./shadowllax.js"></script>

2. Add parallax layers to the parallax container as follows:

<div class="parallax">
  <img src="1.jpg" class="parallax-layer" />
  <img src="2.jpg" class="parallax-layer" />
</div>

3. Add parallax content to the parallax container.

<div class="parallax">
  <img src="1.jpg" class="parallax-layer" />
  <img src="2.jpg" class="parallax-layer" />
  <div class="parallax-content">
    <p>This text will be displayed above the parallax layers.</p>
  </div>
  <div class="above-parallax">
    <p>This text will be placed on a black background with a shadow above the parallax layers.</p>
  </div>
</div>

4. Customize the depth factor in the data attribute:

<div class="parallax">
  <img src="1.jpg" class="parallax-layer" data-depth-factor="20" />
  <img src="2.jpg" class="parallax-layer" />
</div>

Changelog:

10/02/2020

• fix: remove non parallax css

09/29/2020

• fix: remove console log