Creating CSS-Only Parallax Effects: Step-by-Step Guide

#webdev #css #programming #html

Parallax effects make elements on a webpage move at different speeds, creating a sense of depth. It's a way to make things look more interesting.

Parallax effects are popular in web design because they make websites more engaging. They capture people's attention and make the website look better.

This article will show you how to create parallax effects using only CSS. You don't need JavaScript or other fancy technologies.

Let's get started!

What's parallax effect?

As said earlier, parallax effects involve moving elements on a webpage at different speeds, creating a sense of depth and immersion. It's like giving the illusion of objects in the foreground and background moving at different rates as you scroll or interact with the website.

Types: There are various types of parallax effects commonly used in web design, but in this case we will examine just two them:

One type is the "scrolling parallax" where different layers move at different speeds as you scroll.
Another type is the "mouse movement parallax" where elements respond to your mouse movement, creating an interactive effect.

Step1: To begin, create a new HTML file by opening a text editor (in this case, vs code) and saving the file with a ".html" extension. Here's a template to start with:

<!DOCTYPE html>
<html>
<head>
  <title>Your Page Title</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <!-- Your content goes here -->
</body>
</html>

Next, organize the elements that you want to apply the parallax effect to. Typically, you will have multiple elements to create the illusion of depth.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>
  <!-- Create a parallax container with a background image -->
<div class="parallax bg-1"></div>

<!-- Add some content inside a white container -->
<div class="content">
  <h1>Parallax Example</h1>
  <p>This is a simple demonstration of how to create a parallax effect using html and css.</p>
</div>

<!-- Create another parallax container with a different background image -->
<div class="parallax bg-2"></div>

<!-- Add some more content inside a white container -->
<div class="content">
  <h1>Another Parallax Example</h1>
  <p>You can use different images and styles to create different parallax effects.</p>
</div>

<!-- Create a third parallax container with another background image -->
<div class="parallax bg-3"></div>

<!-- Add some final content inside a white container -->
<div class="content">
  <h1>Final Parallax Example</h1>
  <p>Hope you enjoyed this simple tutorial on how to create a parallax effect using html and css.</p>
</div>
</body>
</html>

Step2: To begin styling the parallax elements, you will start by defining the parallax container and adding the necessary background properties to create the scrolling effect.

Example:

/* Define the parallax container */
.parallax {
  /* Set a specific height */
  height: 500px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

In the above code, the height property determines the height of the parallax container, which can be adjusted to fit your design requirements. The background-attachment property set to fixed ensures that the background image remains fixed while the content scrolls.

The background-position property centers the background image, background-repeat is set to no-repeat to prevent the image from repeating, and background-size set to cover ensures the image covers the entire container.

Step3: Here, we will define the background image.

Example:

/* Define the background images */
.bg-1 {
  background-image: url("neom-4AADxUsnufQ-unsplash\ \(1\).jpg");
}

.bg-2 {
  background-image: url("aleksandr-popov--DhozujVOF8-unsplash.jpg");
}

.bg-3 {
  background-image: url("neom-4AADxUsnufQ-unsplash\ \(1\).jpg");
}

The provided code includes three classes: .bg-1, .bg-2, and .bg-3, each representing a different background image.

Note, you can replace the image URLs with the paths to your desired images.

Step4: To style the content within the parallax container, follow this steps:

/* Define the content style */
.content {
  position: relative;
  background-color: white;
  padding: 20px;
}

Here, the .content class is positioned relative and has a white background color with a padding of 20px. As said earlier, you can modify the styles within the .content class to match your design preferences.

Step5: Here, we will define the animations for the background images.

Example:

/* Define the animation for the background image */
@keyframes move-bg-1 {
  from {background-position: 0% 50%;}
  to {background-position: 100% 50%;}
}

/* Define the animation for the midground image */
@keyframes move-bg-2 {
  from {background-position: 0% 50%;}
  to {background-position: 50% 50%;}
}

/* Define the animation for the foreground image */
@keyframes move-bg-3 {
  from {background-position: 0% 50%;}
  to {background-position: 25% 50%;}
}

In the above code, three separate keyframe animations move-bg-1, move-bg-2, and move-bg-3 were defined. Each of them specifies the background-position property to control the movement of the background images.

Also, the from keyword sets the initial position of the background image, while the to keyword sets the final position.

Step6: In this section, we will trigger the animations on hover. Here's how:

/* Trigger the animation when the user hovers over the container */
.parallax:hover {
  animation: move-bg-1 5s linear infinite;
}

.bg-2:hover {
  animation: move-bg-2 5s linear infinite;
}

.bg-3:hover {
  animation: move-bg-3 5s linear infinite;
}

In the above code, when the .parallax container is hovered over, the move-bg-1 animation is applied, creating a parallax effect on the background image with a duration of 5 seconds and a linear timing function. Similarly, when the .bg-2 or .bg-3 classes are hovered over, the move-bg-2 or move-bg-3 animations are applied respectively, creating parallax effects on the midground and foreground images.

Step7: In this section, we combine the overall CSS code and display the output.

/* Define the parallax container */
.parallax {
  /* Set a specific height */
  height: 500px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Define the background images */
.bg-1 {
  background-image: url("neom-4AADxUsnufQ-unsplash\ \(1\).jpg");
}

.bg-2 {
  background-image: url("aleksandr-popov--DhozujVOF8-unsplash.jpg");
}

.bg-3 {
  background-image: url("neom-4AADxUsnufQ-unsplash\ \(1\).jpg");
}

/* Define the content style */
.content {
  position: relative;
  background-color: white;
  padding: 20px;
}

/* Define the animation for the background image */
@keyframes
 move-bg-1 {
  from {background-position: 0% 50%;}
  to {background-position: 100% 50%;}
}

/* Define the animation for the midground image */
@keyframes
 move-bg-2 {
  from {background-position: 0% 50%;}
  to {background-position: 50% 50%;}
}

/* Define the animation for the foreground image */
@keyframes
 move-bg-3 {
  from {background-position: 0% 50%;}
  to {background-position: 25% 50%;}
}

/* Trigger the animation when the user hovers over the container */
.parallax:hover {
  animation: move-bg-1 5s linear infinite;
}

.bg-2:hover {
  animation: move-bg-2 5s linear infinite;
}

.bg-3:hover {
  animation: move-bg-3 5s linear infinite;
}

Output:

Conclusion

Implementing a parallax effect in your HTML and CSS can add depth and visual interest to your website. By organizing the necessary elements, applying appropriate classes, and styling the parallax elements, you can create a captivating scrolling experience.

Thank you for reading! Feel free to say something in the comment section.