Parallax-Image-to-Background-Image-Backpax

A Simple JavaScript Library to Add Parallax Image to Background Image | Backpax

by

Backpax is a JavaScript library that applies smooth parallax scrolling to background images. It also comes with a responsive image delivery feature that dynamically loads the appropriate background images based on the screen size.

fixed background image scrolling content, pure css parallax background image, smooth parallax scrolling background image, parallax scrolling css tricks

How to make use of it:

1. Install and import the Backpax.

# NPM
$ npm i backpax
import Backpax from 'backpax';

2. Or load the backpax.js JavaScript library within the doc.

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

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

new Backpax('.js-parallax');

4. Add a parallax picture to your container.

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

5. Deal with responsive picture supply utilizing 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"
>

Responsive Parallax Scrolling Background, Backpax Plugin/Github, parallax without background image, parallax effect on image tag

See Demo And Download

Demo
Download

Official Website(appleple): Click Here

This superior jQuery/javascript plugin is developed by appleple. For extra Advanced Usages, please go to the official website.

Leave a Comment