A library for giving a parallax scrolling effect to elements (div, img, video etc). Simply add the default class .parallax-element
or set your own identifier: '.your-class'
to any element you want to parallax.
Please help the development by reporting any bugs. Also feel free to contribute to this project. Thanks ❤
- Extremely lightweight: Only 2.9kB (1.1kB gzipped)
- No dependency: It's all Pure javascript
- Ultra smooth: Uses CSS3 Transform. So it can utilize the GPU and hardware acceleration for smooth animation
<script src="https://unpkg.com/[email protected]/src/bparallax.js">
npm i bparallax
Your parallax elements:
<img class="parallax-element" src='...'>
// or
<video class="parallax-element">
<source src="...">
</video>
// or
<div class="parallax-element" style="background-image: url(...)">
Then in javascript:
// If you use the CDN
BoxParallaxScroll().init();
// If you use NPM or a Framework
import BoxParallaxScroll from 'bparallax';
BoxParallaxScroll().init();
// Default values
BoxParallaxScroll({
identifier: ".parallax-element",
strechFactor: 0.2
}).init();
identifier
: [string]- Identify which elements should be parallaxed
strechFactor
: [float] [0 to 1]- Strength of parallax / How much the element should be parallaxed with the scroll. Can be any value from 0 to 1
BoxParallaxScroll creates a wrapper with the class .wrapper
and sets the parallaxable element as it's child.
/* Use this for the images you want to parallax */
.parallax-element{
object-fit: cover; // Fixes image ratio
}