Tiny & Fast Parallax Scrolling JavaScript Library – pureParallax.js

Preview:

Description:

A tiny and easy-to-use JavaScript parallax library for creating parallax scrolling effects that give a 3D-like depth effect to the images or any element on a webpage.

How to use it:

1. Download and import the pureParallax.js into the document.

<script src="dist/pureParallax.js"></script>

2. Initialize the pureParallax.js on document ready.

document.addEventListener('DOMContentLoaded', function () {
  pureParallax({
    // options here
  });
});

3. Apply the parallax scrolling effect to DOM elements.

<div data-depth=".5">
  ...
</div>

<!-- When the element is at the top of the page -->
<div data-depth=".5" class="parallax-top">
  ...
</div>

<!-- When the element is at the bottom of the page -->
<div data-depth=".5" class="parallax-btm">
  ...
</div>

4. Apply the parallax scrolling effect to background images.

<div data-depth=".3" class="parallax-bg">
  This element has a background image
</div>

<!-- When the element is at the top of the page -->
<div data-depth=".5" class="parallax-bg-top">
  This element has a background image
</div>

5. The library also supports horizontal scrolling.

<div data-depth=".3" class="parallax-x">
  ...
</div>

6. Set the start position.

<div data-depth=".3" data-start-position="1">
  ...
</div>

7. Restrict the parallax scrolling effect to a specific container.

<div data-depth=".3" data-container="section">
  ...
</div>

8. Available options.

pureParallax({
  selector: '[data-depth]',
  axisSelector: 'parallax-x',
  bgSelector: 'parallax-bg',
  bgTopSelector: 'parallax-bg-top',
  topSelector: 'parallax-top',
  btmSelector: 'parallax-btm',
  container: 'section',
  offsetHeader: true, 
  headerId: 'hd',
  minWidth: 64, // Min screen width. Useful for auto-disable on mobile devices
  oldBrowserSupport: 'false'
});