Basic Parallax

A very basic and crude parallax implementation where the background images remain static as the content scrolls past. CSS only, no JS in sight.

by cchana

HTML

<section>

    <h1>
        This is my first section
    </h1>

</section>

<section>

    <h1>
        This is my second section
    </h1>

</section>

SCSS

section {
    background-attachment: fixed;
    background-size: cover;
    color: #FFF;
    height: 100vh;
    &:first-child {
        background-image: url('https://c1.staticflickr.com/5/4562/24378970168_55cf3ae32b_b.jpg');
        color: #000;
    }
    &:nth-child(2) {
        background-image: url('https://c1.staticflickr.com/5/4467/38180196346_8318c2325c_b.jpg');
    }
}

h1 {
    padding: 10px;
    margin: 0;
}