Rallax.js is a vanilla JS plugin that implements a dynamic parallax scrolling effect, without dependencies. See documentation.
Dead
Simple
Parallax
Scrolling
// example code for 'dead' block
const dead = rallax('.dead')
dead.when(
() => window.scrollY > 750,
() => dead.stop()
).when(
() => window.scrollY < 750,
() => dead.start()
Explore a variety of options, including:
- Changing parallax speed
- Conditionally disabling and enabling the effect
- Compensating for mobile devices
// first use JS to take measurements, then apply styles
Object.assign(image.style, {
position: 'relative',
top: `${imageTop}px`,
left: `${imageLeft}px`,
height: `${imageHeight}px`,
width: `${imageWidth}px`
})
// add parallax using Rallax.js
const imageParallax = rallax(image, {speed})