Home
Programming

Smooth Parallax Effect in HTML

Syiainfoku make a Smooth Parallax Effect in HTML

Smooth Parallax Effect in HTML

Welcome back, with me the founder of Syiainfoku. You will learn together on the Syiainfoku blog how to make a Smooth Parallax Effect in HTML.

Ok, let's get started 

Preview Smooth Parallax Effect

Preview Smooth Parallax Effect

More or less the result will be like in the image above.

Source Code and Brief Explanation

First, create an HTML file with the name index.html and paste the given code in your HTML file. Remember, you must create a file with an .html extension.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smooth Parallax Effect | hitoricoding</title>
    <link rel="stylesheet" href="./assets/style.css">
</head>

<body>
    <main>
        <div id="parallax">
            <h2>ビューティフル</h2>
            <p>beautiful</p>
        </div>
        <div>
            <h2> ア イ ウ エ オ</h2>
            <p>Katakana is one of three ways of writing Japanese. Katakana is usually used to write words that come from
                foreign languages that have been absorbed into Japanese (外来 語 / gairaigo). Besides that, it is also used
                to write onomatopoeia and native Japanese words, this is only an affirmation.</p>
        </div>
        <div>
            <h2>Mountain</h2>
            <p>山</p>
        </div>
        <div>
            <h2>ありがとう</h2>
        </div>
    </main>

    <script src="./assets/main.js"></script>
</body>

</html>

Second,  create a CSS file with the name style.css and paste the given code in your CSS file. Remember, you must create a file with a .css extension. Background image can be changed according to taste.

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

div {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100vh;
}

div h2 {
    font-weight: 100;
    font-size: 60px;
}

div:nth-child(1) {
    background-image: url(../images/simple1.jpg);
    background-size: cover;
    color: #32323286;
}

div:nth-child(1) p {
    color: #010813;
    letter-spacing: 10px;
    font-weight: 100;
}

div:nth-child(2) {
    background-color: #02142cc4;
    color: #fefefe;
}

div:nth-child(2) p {
    margin: 10px 150px;
    color: #ffffffce;
    text-align: justify;
}

div:nth-child(3) {
    height: 400px;
    background-image: url(../images/simple2.jpg);
    background-size: cover;
    background-attachment: fixed;
}

div:nth-child(4) {
    background-color: #f79ddcd3;
}

Finally, create a JS file with the name main.js and paste the given code in your JS file. Remember, you must create a file with a .js extension.

let parallax = document.getElementById("parallax");

window.addEventListener("scroll", function () {
    let offset = window.pageYOffset;
    parallax.style.backgroundPositionY = offset * 0.2 + "px";
});

That's it, now you have successfully created a Smooth Parallax Effect, If your code is not working or you are facing any error/problem, please download the source code file from the given download button. It's free and a .zip file will be downloaded then you have to extract it.

Download 

Closing

Thank you for those of you who have read and downloaded this source code, hopefully it can be useful and add to your insight.

If you found this article useful, you can share it. That's all from me, and THANK YOU

Post a Comment