Horizontal Smooth Scrolling Parallax Slider in Vanilla JavaScript

A horizontal slider for smooth scrolling is a great photo slider that slides smoothly between photos when you scroll up or down the page.

parallax scrolling example, full page parallax scroll effect, parallax scrolling website, parallax scrolling multiple images, horizontal parallax slider plugin, horizontal parallax scrolling on same page

How to make use of it:

1. The HTML structure of the parallax slider.

<main>
  <div class="slider">
    <div class="slider-inner">
      <div class="item">
        <div class="image"></div>
      </div>
      <div class="item">
        <div class="image"></div>
      </div>
      <div class="item">
        <div class="image"></div>
      </div>
      <div class="item">
        <div class="image"></div>
      </div>
      <div class="item">
        <div class="image"></div>
      </div>
      <div class="item">
        <div class="image"></div>
      </div>
    </div>
  </div>
</main>

2. Necessary CSS Styles.

main {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 2800px;
  height: 100%;
}

.slider-inner {
  position: absolute;
  top: 15%;
  height: 70%;
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.item {
  position: relative;
  width: 400px;
  height: 100%;
  overflow: hidden;
}

.image {
  position: absolute;
  left: -100px;
  width: 600px;
  height: 100%;
  background-size: cover;
  background-position: center;
}

3. Add background images to the parallax slider.

images.forEach((image, index) => {
  image.style.backgroundImage = `url(./images/${index+1}.jpg)`
})

4. Main javascript to activate the parallax slider.

let images = [...document.querySelectorAll('.image')];
let slider = document.querySelector('.slider');
let sliderWidth;
let imageWidth;
let current = 0;
let target = 0;
let ease = 0.05;
window.addEventListener('resize', init)
// Linear interpolation function
function lerp(start, end, t) {
  return start * (1-t) + end * t;
}
// Transform function
function setTransform(el, transform) {
  el.style.transform = transform;
}
// Init function
function init() {
  sliderWidth = slider.getBoundingClientRect().width;
  imageWidth = sliderWidth/images.length;
  document.body.style.height = `${sliderWidth - (window.innerWidth - window.innerHeight)}px`
}
// Animating slider
function animate() {
  current = parseFloat(lerp(current, target, ease)).toFixed(2);
  target = window.scrollY;
  setTransform(slider, `translateX(${-current}px)`)
  animateImages()
  requestAnimationFrame(animate)
}
// Animating images for parallax effect
function animateImages() {
 let ratio = current / imageWidth;
 let intersectionRatioValue;
 images.forEach((image, index) => {
   intersectionRatioValue = ratio - (index * 0.7)
   setTransform(image, `translateX(${intersectionRatioValue * 70}px)`)
 })
}
init()
animate()

Scroll-triggered Parallax Slider, Smooth Scrolling Parallax Slider Plugin/Github, horizontal parallax scrolling template free


See Demo And Download

Official Website(austinejose1516): Click Here

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

Share