Parallax Scrolling Effect For Single Or Multiple Layers – shadowllax

Category: Animation , Javascript | October 2, 2020
Author:HarshKhandeparkar
Views Total:62 views
Official Page:Go to website
Last Update:October 2, 2020
License:MIT

Preview:

Parallax Scrolling Effect For Single Or Multiple Layers – shadowllax

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

You Might Be Interested In:


One thought on “Parallax Scrolling Effect For Single Or Multiple Layers – shadowllax

  1. Harsh Khandeparkar

    May I know who creates these pages? I was a bit startled to see my name here. I feel like the “author” field should be changed to a “developer” field instead because author sounds like the author of this page.

    Reply

Leave a Reply