Add a parallax effect using only HTML5 & CSS

This tutorial explains how to add a parallax scrolling effect using some simple HTML5, CSS and JavaScript code. If you want to know more about the origins of the parallax effect, click here to see how Disney used the parallax effect in their early cartoon animation.

Watch the video below and then scroll down to see the sample code and sample image files you can use.

Sample code and images

Here is the HTML code which references a style.css stylesheet:

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Home</title>
        <link rel="stylesheet" href="style.css" type="text/css"/>
    </head>

    <body>
        <div class="background1">
            <div class="buttondiv">
                <a href="start.html" class="button">Get started</a>
            </div>
        </div>

        <div class="welcome">
            <h3 class="heading">Welcome to our website</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>

        <div class="background2">
            <div class="buttondiv">
                <a href="about.html" class="button">About us</a>
            </div>
        </div>

        <div class="wrapper">
            <div class="about">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>

        <div class="background3">
            <div class="buttondiv">
                <a href="contact.html" class="button">Contact us</a>
            </div>
        </div>

        <div class="wrapper">
            <div class="contact">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </body>
</html>

Here is the CSS code (style.css file):

body, html{
    height: 100%;
    margin: 0;
    font-family: Arial;
}

.background1, .background2, .background3{
    position: relative;
    opacity: 0.6;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.background1{
    background-image: url('banner1.png');
    min-height: 100%;
}

.background2{
    background-image: url('banner2.png');
    min-height: 350px;
}

.background3{
    background-image: url('banner3.png');
    min-height: 350px;
}

.buttondiv{
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    color: black;
}

.button{
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid white;
    color: white;
    padding: 16px;
    font-size: 22px;
    letter-spacing: 8px;
}

.button:hover{
    background-color: #232425;
    transition: 1s;
    opacity: 0.5;
}

.heading{
    letter-spacing: 4px;
    text-transform: uppercase;
    text-align: center;
    color: black;
}

.welcome{
    color: #6b6a6a;
    background-color: white;
    text-align: center;
    padding: 60px 50px;
    text-align: justify;
}

.about{
    color: #9c9b9b;
    background-color: #232425;
    text-align: center;
    padding: 60px 50px;
    text-align: justify;
}

.contact{
    color: #232425;
    background-color: white;
    text-align: center;
    padding: 60px 50px;
    text-align: justify;
}

.wrapper{
    position: relative;
}

Feel free to use these images to test out the code:

banner1 banner2 banner3