DEV Community

Cover image for 🌄 How To Implement Parallax Scrolling Effect Using HTML, CSS & JavaScript
Raj Aryan
Raj Aryan

Posted on

🌄 How To Implement Parallax Scrolling Effect Using HTML, CSS & JavaScript

#webdev #programming #javascript #beginners

Parallax scrolling is a modern web design technique where background images move slower than foreground content as you scroll down, creating a 3D depth illusion. It's a popular trend in portfolio sites, landing pages, and storytelling experiences.

In this tutorial, I’ll walk you through a clean and simple way to implement parallax scrolling using plain HTML, CSS, and a touch of JavaScript — no libraries required!

🎯 What You'll Learn

  • What parallax scrolling is
  • How to implement it with HTML + CSS
  • How to enhance it with JavaScript
  • A fully working example

📁 Project Structure 

parallax-scroll/
├── index.html
├── styles.css
└── script.js
Enter fullscreen mode Exit fullscreen mode

🧱 Step 1: Basic HTML Structure 

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Parallax Scrolling</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>

  <section class="parallax"></section>

  <section class="content">
    <h1>Welcome to Parallax World</h1>
    <p>This is a simple demo to show how parallax scrolling works!</p>
  </section>

  <section class="parallax second"></section>

  <section class="content dark">
    <h1>More Scroll, More Depth</h1>
    <p>The effect creates an illusion of depth between layers.</p>
  </section>

  <script src="script.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

🎨 Step 2: Style with CSS 

/* styles.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  height: 100%;
  font-family: sans-serif;
  scroll-behavior: smooth;
}

.parallax {
  height: 100vh;
  background-image: url('https://picsum.photos/id/1018/1000/600');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax.second {
  background-image: url('https://picsum.photos/id/1015/1000/600');
}

.content {
  padding: 60px 40px;
  text-align: center;
  background: white;
  color: #333;
}

.content.dark {
  background: #111;
  color: #eee;
}
Enter fullscreen mode Exit fullscreen mode

✅ You can change the image URLs to your own backgrounds or hosted assets.

🧠 Step 3: Optional JavaScript (Add Smooth Fade or Effects)

Want more interactivity? Try this simple fade-in effect on scroll:

// script.js
const contents = document.querySelectorAll('.content');

window.addEventListener('scroll', () => {
  contents.forEach((section) => {
    const rect = section.getBoundingClientRect();
    if (rect.top < window.innerHeight - 100) {
      section.classList.add('visible');
    }
  });
});
Enter fullscreen mode Exit fullscreen mode

Add this to your CSS for animation:

.content {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.6s ease;
}

.content.visible {
  opacity: 1;
  transform: translateY(0);
}
Enter fullscreen mode Exit fullscreen mode

✅ Final Tips

  • Parallax works best on large screens or sections with strong contrast.
  • Avoid overuse—it can hurt performance if not optimized.
  • Combine with scroll libraries like Locomotive.js or GSAP for advanced effects.

🧪 Live Demo

You can check out the working version on CodePen or your own local browser by opening index.html.

💬 Wrapping Up

Parallax scrolling adds a stunning visual layer to your web experience. With just a few lines of HTML and CSS, and optional JavaScript, you can wow your visitors with smooth, layered scrolling animations.

Let me know in the comments if you want an advanced version using React, GSAP, or Three.js!

#html #css #javascript #webdev #parallax #frontend

Top comments (0)