Responsive Parallax Scrolling Background JavaScript Library – Backpax

Category: Animation , Javascript | February 5, 2021
Author: appleple
Views Total: 222 views
Official Page: Go to website
Last Update: February 5, 2021
License: MIT

Preview:

Responsive Parallax Scrolling Background JavaScript Library – Backpax

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"
>

You Might Be Interested In:


Leave a Reply