Responsive Parallax Scrolling Background JavaScript Library – Backpax

Preview:

Description:

Backpax is a JavaScript library that applies a smooth parallax scrolling effect to background images.

Also comes with a responsive image delivery feature that dynamically loads appropriate background images based on the screen size.

How to use it:

1. Install and import the Backpax.

# NPM
$ npm i backpax

import Backpax from 'backpax';

2. Or load the backpax.js JavaScript library in the document.

<script src="bundle/backpax.js"></script>

3. Initialize the Backpax library and we’re ready to go.

new Backpax('.js-parallax');

4. Add a parallax image to your container. That’s it.

<div class="js-parallax parallax" 
     data-img="/path/to/bg.jpg">
</div>

5. Deal with responsive image delivery using the data-img-BREAKPOINT attribute:

<div class="js-parallax parallax"
     data-img="/path/to/bg.jpg"
     data-img-768="/path/to/small.jpg"
     data-img-1024="/path/to/large.jpg"
>

Changelog:

v1.0.7 (03/22/2022)

• improved performance