Create An Interactive Parallax Image Slider Using Pure JavaScript

This is a modern, responsive, touch-friendly image slider created using HTML, CSS/CSS3, and vanilla JavaScript. It brings together smooth scrolling animations, responsive card scaling, and a captivating parallax effect.

The slider supports arrow keys and mouse scrolling on desktop, as well as touch gestures on mobile devices. When users interact with the slider, images move smoothly left and right. As images move, the central image takes center stage with an enlarged view, while others gracefully shrink or enlarge as they move to or from the focal point.

How to use it:

1. Create the HTML markup for your slider. Each image will reside within a “card” div, nested within the main “slider” container.

<div class="slider">
  <div class="card">
    <img src="/path/to/your/image">
  </div>
  <div class="card">
    <img src="/path/to/your/image">
  </div>
  <!-- Add more card elements as needed -->
</div>

2. Add the CSS to style the slider and achieve the smooth transitions and scaling effects.

.slider{
  margin: 1em;
  width: 500%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 37%;
  display:flex;
  align-items: center;
  justify-content: space-around;
}
.card{
  width: 400px;
  height: 500px;
  transition: transform 0.1s ease-out;
  overflow: hidden;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.1s ease-out;
}

3. Copy and paste the following JS code into your page. This code handles the slider’s scrolling functionality, calculates the scaling factors for each card based on their position, and applies the parallax effect.

const slider = document.querySelector(".slider");
const cards = document.querySelectorAll(".card");
const ease = 0.1;
let currentX = 0;
let targetX = 0;
const getScaleFactor = (position, viewportWidth) => {
    const quarterWidth = viewportWidth / 4;
    if (position < 0 || position > viewportWidth){
        return 0;
    } else if(position < quarterWidth){
        return lerp(0, 0.45, position/quarterWidth);
    } else if(position < 2 * quarterWidth){
        return lerp(0.45, 1.5, (position - quarterWidth)/quarterWidth);
    } else if(position < 3 * quarterWidth){
        return lerp(1.5, 0.45, (position - 2 * quarterWidth)/quarterWidth);
    } else{
        return lerp(0.45, 0, (position - 3 * quarterWidth)/quarterWidth);
    }
};
const updateScales = () => {
    const viewportWidth = window.innerWidth;
    cards.forEach((card) => {
        const cardRect = card.getBoundingClientRect();
        const cardCenter = cardRect.left + cardRect.width / 2;
        const scaleFactor = getScaleFactor(cardCenter, viewportWidth);
        const imgScaleFactor = scaleFactor * 1.1;
        const img = document.querySelector("img");
        card.style.transform = `scale(${scaleFactor})`;
        img.style.transform = `scale(${imgScaleFactor})`;
    });
};
const lerp = (start, end, t) => {
    return start + (end - start) * t;
};
const update = () => {
    currentX = lerp(currentX, targetX, ease);
    slider.style.transform = `translateX(${currentX}%)`;
    updateScales();
    requestAnimationFrame(update);
};
window.addEventListener("scroll", () => {
    const maxScroll = document.body.scrollHeight - window.innerHeight;
    const scrollProgress = window.scrollY / maxScroll;
    targetX = scrollProgress * -96;
});
update();

How it works:

The magic happens through a combination of CSS transitions and JavaScript calculations. The CSS transition property on the .card and img elements ensures smooth visual changes when their properties are modified.

The JavaScript code dynamically calculates the scaling factor for each card based on its position within the viewport. The getScaleFactor function determines the appropriate scaling based on the card’s position relative to the center. The lerp function (linear interpolation) creates a smooth transition between the current and target positions during scrolling.

Finally, the update function, called recursively with requestAnimationFrame, ensures a smooth animation loop, recalculating positions and scales on each frame.