There are prenty of libraries out there to add parallax effects
But still, We had reasons we had to make this library.
We just want to add parallax effects to
background-image and We don't need to add effects to any other elements too
2. Speed Control
Almost all libraries that we encountered, need
but What if the images are too small that images can't move anymore? In some cases, it's difficult to set the speed of parallax effects.
That's why, We want the library to set the speed by itself, So that the whole image will be shown during scroll
You can easily start by using CDN.
Add the following description in the
<head> tag of the web page you want to use Backpax.
You can also bundle the library with Browserify/Webpack
npm install backpax --save
import Backpax from 'backpax'
Just replace the
<div class="js-parallax" data-img="https://images.unsplash.com/photo-1565275706395-d452122d6cfc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"> <p>contents here</p> </div>
Write the following script
You can also set some breakpoints so that you can optimize image size in accordance with the screen size.
Add the following description to the target tag.
<div class="js-parallax" data-img="./path/to/default-image" data-img-768="./path/to/image-which-size-is-smaller-than-768" data-img-1024="./path/to/image-which-size-is-smaller-than-1024" > <p>contents here</p> </div>
And write the following script
You can also use
NodeList instead of string