Back To Tutorials

Parallax Scrolling Effect

Intermediatechallenge

In this challenge, you will create a parallax scrolling effect on a webpage using only HTML and CSS. The parallax effect will create an illusion of depth by making background images move at a different speed compared to the foreground content as the user scrolls. This effect is often used to add visual interest and engagement to web pages.

Objective:

  • Learn how to create a parallax scrolling effect using CSS.
  • Understand how to layer elements to achieve a sense of depth and motion.

Requirements:

  1. Use HTML and CSS only (no JavaScript).
  2. Create a webpage with at least three sections:
    • A hero section with a background image.
    • A content section with foreground text.
    • A footer section.
  3. Apply a parallax effect to the hero section background so that it scrolls at a different speed than the rest of the page content.
  4. Ensure the design is responsive and visually appealing.

Steps:

  1. HTML Structure:

    • Create a header, section, and footer in your HTML file.
    • Include a hero section with a background image and text content.
    • Add a content section with some text or other content to scroll through.
    • Include a footer section.

  2. CSS Styling:

    • Use the background-attachment: fixed; property for the hero section to create the parallax effect.
    • Style the hero section with a large background image and some overlay text.
    • Add padding or margins to create space between sections.

  3. Responsive Design:

    • Use media queries to ensure the parallax effect and layout work well on different screen sizes.
    • Adjust image sizes and text positioning as needed for mobile and tablet views.

Resources:

Solution:

Your solution should include:

  • A complete HTML and CSS file.
  • A webpage with a visible parallax effect on the hero section background.
  • A layout that adjusts responsively to different screen sizes.

html

<header class="hero">
  <div class="hero-text">
    <h1>Welcome to My Website</h1>
    <p>Enjoy the parallax scrolling effect!</p>
  </div>
</header>
<section class="content">
  <h2>About Us</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
</section>
<footer>
  <p>&copy; 2024 My Website</p>
</footer>

css


/* CSS for layout and parallax effect */
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

header.hero {
  background-image: url('https://via.placeholder.com/1500x800');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  height: 100vh;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-text {
  padding: 20px;
}

section.content {
  padding: 60px 20px;
  background-color: #f4f4f4;
}

footer {
  padding: 20px;
  text-align: center;
  background-color: #333;
  color: white;
}

/* Responsive Design */
@media (max-width: 768px) {
  header.hero {
    height: 50vh;
  }
}

@media (max-width: 480px) {
  header.hero {
    height: 40vh;
  }
}