How to make a Parallax Effect with Html, Css and JS

By coursity / July 13, 2024

Introduction

Parallax Effect enhance the quality of a website. Today I will tell you how to make a parallax website in a few steps. You can use my asset to make the website and visit my parallax website on github !

Let’s Get Started:

Step 1: Write html code

<!DOCTYPE html>
<head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Parallax website</title> <link rel="stylesheet" href="style.css">
</head>
<body> <main> <section id="hero-section"> <div id="moon"></div> <img src="/images/haunted.png" alt="haunted house"> <h1 id="text">Parallex Website</h1> <img src="/images/hands.png" alt="hands"> </section> <section id="content"> <h1>Parallex Website</h1> <p>Dummy text. Make sure the content is long enough so that the visitor is able to scroll the website</p> </section> </main> http://script.js
</body>
</html>

Enter fullscreen mode
Exit fullscreen mode

Here I create a basic html document in which there are two section. One is for the images and second for the content. I have give id to both section so that I can select them easily. Keep in mind to arrange your assets images properly. If you arrange a big image before the smaller once, then the smaller image will hide behind it. Don’t forget to link your css and javascript document.

Step 2: Defining Css document

*{ margin: 0; padding: 0;
}
body{ background-color: rgb(12, 10, 20);
}
#hero-section{ display: flex; justify-content: center; align-items: center; height: 100vh;
}

Enter fullscreen mode
Exit fullscreen mode

Firstly, define the hero section styling. You should use the same styling so that all your content will be at the center. You can also set background color according to your assets.

#hero-section img{ position: absolute; top: 0; left: 0; width: 100%; height: 40rem; pointer-events: none;
}

Enter fullscreen mode
Exit fullscreen mode

Now, the images styling. We use left and top to zero so that every image is align in the left and top side. This will do the trick to style the images. Here, I use height to 40rem because my image was very big. You have to set the width and height according to your images.

#hero-section #text{ position: relative; font-size: 3rem; color: white; font-weight: bolder;
} #hero-section #moon{ position: relative; bottom: 25%; background-color: rgb(220, 218, 218); width: 8rem; height: 8rem; border-radius: 100%;
}

Enter fullscreen mode
Exit fullscreen mode

Now, style the Heading and the moon. So can set these styles according to you. I have set moon to 25% bottom and at the center and give a grey tone.

#content{ position: relative; background-color: rgb(96, 21, 33); padding: 2rem; z-index: 1; // this is important
} #content h1{ font-size: 2.5rem; margin-bottom: 1rem;
} #content p{ font-size: 1.2rem;
}

Enter fullscreen mode
Exit fullscreen mode

At the end, I have give some styling to content section. You can also change the styling of the content according to your choice but dont forgot to add z-index. It will make it a level higher than other. For more information about z-index you can visit to w3school or on any another website.

Step 3: Writing the Javascript

let text = document.getElementById('text');
let moon = document.getElementById('moon'); window.addEventListener('scroll',() =>{ let value = window.scrollY; //console.log(value); text.style.marginTop = value * 2.5+'px'; moon.style.right = value * 2.5+'px';
})

Enter fullscreen mode
Exit fullscreen mode

Now the main thing, javascript. It is preety simple. First I select the hero-section heading and the moon. Then, a addEventListener with a function which works when the page is scroll. Now, we will access the value of y-axis with window.scrollY. You can console log it if you want.

Now, we will multiply the value with the left of moon with 2.5 so that the moon will move towards left, when you scroll the page. If you think that it is moving fast then you can change 2.5px with a smaller number then it will move slower than before.

Then, we will also multiply the value with the marginTop of hero-section heading with 2.5px so that when you scroll the page, the heading will come downwards. But the heading will still appear if we scroll downwards! Don’t worry, did you remember we apply z-index on the content section. So the heading will hide below the content section. And now its finish.

Conclusion

So, that all for making a parallax website. You can add more things with it to make your website look even better. And Thank You for reading till the end. I hope you like it and don’t forget to tell me in the comments if you like the post or how can I make my posts even better. Also please visit my github !

Related

Discover more from Coursity

Subscribe to get the latest posts sent to your email.

Leave a Comment Cancel Reply