Build a Parallax Scrolling Website Using HTML, CSS and JS

Parallax scrolling boosts engagement by 70%, improves storytelling, and reduces bounce rates on modern websites, especially in portfolios, landing pages and creative web designs.

Key Points

Parallax scrolling boosts user engagement by up to 70%.
Websites using parallax have a 43% longer average visit duration.
Parallax design reduces bounce rates by up to 30% on visual-first pages.

Web Designer

Sunidhi

4 min read

Creative web designer with 2+ years of experience crafting visually engaging and user-friendly website designs.

image of a web browser with icons for HTML, CSS and JavaScript representing web development and design concepts

Introduction

Parallax scrolling has become a go-to technique in modern web design. It allows you to create dynamic visual effects by making background images move more slowly than foreground content during scrolling. This level of depth offers an engaging experience for users and is widely adopted by creative agencies, portfolios, and custom landing pages. In this tutorial, we will guide you through building a parallax scrolling effect using HTML, CSS and JavaScript, a valuable technique for any web development company or developer looking to enrich their website development services.

Whether you are a freelance developer or looking to hire PHP developers for your next project, mastering this technique adds a powerful interactive feature to your skillset.

HTML Structure – Laying the Foundation

                                        <div class="container">
  <section class="background">
    <div class="content-wrapper">
      <p class="content-title">Full Page Parallax Effect</p>
      <p class="content-subtitle">Scroll down and up to see the effect!</p>
    </div>
  </section>
  <section class="background">
    <div class="content-wrapper">
      <p class="content-title">Wild and free.</p>
      <p class="content-subtitle">Look deep into nature, and then you will understand everything better.</p>
    </div>
  </section>
  <section class="background">
    <div class="content-wrapper">
      <p class="content-title">Infinite possibilities.</p>
      <p class="content-subtitle">Equations connect ideas and reality.</p>
    </div>
  </section>
</div>

Explanation:

The .container wraps all the parallax slides.
Each .background section represents a full-screen layer with a background image and overlay text.
The .content-wrapper is used to place styled text content on top of each section.

This modular layout is easy to extend and is commonly used by a web development company to build rich landing pages as part of their website development services.

CSS Styling & Transitions

CSS is where the visual magic happens. It helps position, animate, and transform elements to give them motion and style.

Global and Layout Styles

These styles define basic document properties and include font loading.

                                        @import url("https://fonts.googleapis.com/css?family=Montserrat");


html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  scroll-behavior: smooth;
}


.background {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  overflow: hidden;
  will-change: transform;
  backface-visibility: hidden;
  height: calc(100vh + 30vh);
  position: fixed;
  width: 100%;
  transform: translateY(30vh);
  transition: all 1.2s cubic-bezier(0.22, 0.44, 0, 1);
}

This ensures a full-screen layout and smooth scroll behavior, foundational for any parallax implementation by a professional web development company.

Overlay effect on backgrounds:

                                        .background:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
}

The overlay adds a semi-transparent dark layer over the background, enhancing text readability and aesthetic balance—a common design choice in custom web development for improving UX.

Background images and stacking order:

                                        .background:first-child {
  background-image: url(https://i.postimg.cc/kXq9Qmnj/bgd1.jpg);
  transform: translateY(-15vh);
}


.background:first-child .content-wrapper {
  transform: translateY(15vh);
}


.background:nth-child(2) {
  background-image: url(https://i.postimg.cc/W14vywqg/photo-1424746219973-8fe3bd07d8e3.jpg);
}


.background:nth-child(3) {
  background-image: url(https://i.postimg.cc/TY0xQ41T/photo-1433840496881-cbd845929862.jpg);
}

Each background section gets a unique image. These full-width visuals help create the immersive scroll effect that many clients seek when they hire PHP developers or a web development company.

Text content styles and transform:

                                        .content-wrapper {
  height: 100vh;
  display: flex;
  justify-content: center;
  text-align: center;
  flex-flow: column nowrap;
  color: #fff;
  font-family: Montserrat, sans-serif;
  text-transform: uppercase;
  transform: translateY(40vh);
  will-change: transform;
  backface-visibility: hidden;
  transition: all 1.7s cubic-bezier(0.22, 0.44, 0, 1);
}


.content-title {
  font-size: 12vh;
  line-height: 1.4;
}

Typography and layout for the text are designed for maximum visibility and alignment. Clean, readable text is crucial in website development services, especially when balancing design and content.

Scroll Direction Classes for Animation

To support scrolling animation, additional classes like .up-scroll and .down-scroll are toggled dynamically:

                                        .background.up-scroll {
  transform: translate3d(0, -15vh, 0);
}


.background.up-scroll .content-wrapper {
  transform: translateY(15vh);
}


.background.up-scroll + .background {
  transform: translate3d(0, 30vh, 0);
}


.background.up-scroll + .background .content-wrapper {
  transform: translateY(30vh);
}


.background.down-scroll {
  transform: translate3d(0, -130vh, 0);
}


.background.down-scroll .content-wrapper {
  transform: translateY(40vh);
}


.background.down-scroll + .background:not(.down-scroll) {
  transform: translate3d(0, -15vh, 0);
}


.background.down-scroll + .background:not(.down-scroll) .content-wrapper {
  transform: translateY(15vh);
}

These CSS classes (.up-scroll and .down-scroll) change the position of slides and their content to create the vertical sliding parallax effect.

JavaScript Functionality – Adding Interactivity

Now we bring everything together with JavaScript. The JS code handles scroll events, determines direction, and toggles classes that trigger CSS transitions.

Variables and constants

                                        const scrollSensitivitySetting = 30;  // scroll threshold to trigger slide change
const slideDurationSetting = 600;      // lock duration (ms) between slide changes


let ticking = false;                   // prevents rapid slide changes
let currentSlideNumber = 0;            // tracks current slide index
const totalSlideNumber = document.querySelectorAll(".background").length; // total slides

Throttle function

                                        function throttle(func, limit) {
  let inThrottle;
  return function () {
    const args = arguments;
    const context = this;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

This function limits how often scroll events fire, which is essential for performance, especially on high-traffic websites developed through custom web development strategies.

Scroll event handler

                                        function parallaxScroll(evt) {
  let delta;
  const isFirefox = /Firefox/i.test(navigator.userAgent);
  const isIe = /MSIE/i.test(navigator.userAgent) || /Trident.*rv\:11\./i.test(navigator.userAgent);


  if (isFirefox) {
    delta = evt.detail * -120;
  } else if (isIe) {
    delta = -evt.deltaY;
  } else {
    delta = evt.wheelDelta || -evt.deltaY;
  }


  if (!ticking) {
    if (delta <= -scrollSensitivitySetting && currentSlideNumber < totalSlideNumber - 1) {
      ticking = true;
      currentSlideNumber++;
      nextItem();
      slideDurationTimeout();
    }


    if (delta >= scrollSensitivitySetting && currentSlideNumber > 0) {
      ticking = true;
      currentSlideNumber--;
      previousItem();
      slideDurationTimeout();
    }
  }
}

This code listens for scroll input and determines the scroll direction to shift between slides. JavaScript like this is common in interactive sites delivered by experienced web development companies.

Lock timeout to prevent multiple fast slide changes

                                        function slideDurationTimeout() {
  setTimeout(() => {
    ticking = false;
  }, slideDurationSetting);
}
function nextItem() {
  const previousSlide = document.querySelectorAll(".background")[currentSlideNumber - 1];
  if (previousSlide) {
    previousSlide.classList.remove("up-scroll");
    previousSlide.classList.add("down-scroll");
  }
}




function previousItem() {
  const currentSlide = document.querySelectorAll(".background")[currentSlideNumber];
  if (currentSlide) {
    currentSlide.classList.remove("down-scroll");
    currentSlide.classList.add("up-scroll");
  }
}

These functions control how slides are animated when users scroll. This logic ensures a smooth and engaging browsing experience, a top priority in website development services.

Event listener for mouse wheel scroll

                                        const mousewheelEvent = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "wheel";
window.addEventListener(mousewheelEvent, throttle(parallaxScroll, 60), false);

This listener enables cross-browser scroll detection, allowing consistent performance across all devices.

Why This Matters for Developers and Businesses

If you are providing website development services or planning to hire PHP developers to expand your team, knowing how to implement parallax scrolling adds tremendous value. This approach showcases front-end expertise and contributes to better engagement and modern web interfaces.

Many businesses today prefer a web development company that offers custom web development with interactive elements like parallax scrolling. It gives them a competitive edge and makes websites more visually appealing.

Key Benefits of Using Parallax Scrolling

Visually enhances the user experience
Adds storytelling and dynamic flow to landing pages
Works well for both single-page applications and long-scroll websites
Engages visitors for longer durations
Easily integrated with your PHP backend for dynamic content

Final Words

Parallax scrolling is more than just a visual trick—it’s a creative tool that improves interactivity and user engagement. By following this guide, you can build your own scroll-based animations using clean HTML, CSS, and JavaScript. If you're offering website development services, adding parallax effects shows clients that you can go beyond static design.

Whether you're a freelancer or part of a web development company, mastering features like these allows you to deliver more polished and modern websites. And for businesses looking to hire PHP developers, proficiency in these techniques is a mark of quality and professionalism in custom web development.