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/bparallax@1.0.10/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 }