The Simplicity of Parallax
Parallax scrolling may look complicated, but it’s actually not too complex and doesn’t require any fancy CSS properties. However, it definitely adds to the user experience and can be eye catching…sometimes even too captivating!
Parallax scrolling is where backgrounds, typically images, scroll at different speeds than the foreground context. This creates a 2D effect with depth and movement of layers. There are plugins and libraries to accomplish this, but let’s build this ourselves to see the simplicity behind parallax scrolling.
The main CSS property contributing to this effect is background-attachment: fixed, which makes the background image fixed. The layer on top scrolls normally while the background image remains fixed. Additionally, the properties background-size and background-position are important to scale and position the images accordingly.
Let’s walk through some HTML and CSS to make some parallax scrolling happen! 🎉 First, with the HTML we’ll create empty sections that will contain the background images.
<body>
<section class="parallax"></section>
<section class="parallax"></section>
<section class="parallax"></section>
<section class="parallax"></section>
</body>Now comes the magic of CSS! 🎩 In order for the background images to take up the entire space of the browser window I’ve removed the margin from the body and have made the viewport height and viewport width both 100% on the <section> tags. You can target specific sections with the pseudo-class :nth-of-type in order to set different background images.
body {
margin: 0;
}.parallax {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
width: 100vw
}.parallax:nth-of-type(1) {
background-image: url('../img/dog.jpg');
} .parallax:nth-of-type(2) {
background-image: url('../img/goat.jpg');
} .parallax:nth-of-type(3) {
background-image: url('../img/pig.jpg');
} .parallax:nth-of-type(4) {
background-image: url('../img/elephant.jpg');
}
If you want any text on the background images you can include semantic tags within the sections and then you will need to add position: relative to the <section> tags and position: absolute to the <p> tags in order to position the text where you would like.
<body>
<section class="parallax">
<p>Dog</p>
</section>
<section class="parallax">
<p>Goat</p>
</section>
<section class="parallax">
<p>Pig</p>
</section>
<section class="parallax">
<p>Elephant</p>
</section>
</body>
.parallax {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
position: relative;
width: 100vw
}p {
font-size: 20px;
position: absolute;
text-align: center;
top: 20%;
width: 100%;
}
Be conscious that some tablets and mobile devices don’t support background-attachment: fixed, so it is recommended to remove parallax scrolling on these devices. You can do so by adding a media query to change the attachment from fixed to scroll.
@media screen and (max-width: 1030px) {
.parallax {
background-attachment: scroll;
}
}And that’s all there is to it! See that wasn’t too complicated! 😆 You can get even more fancy with adding various scrolling speeds or custom images, but this is the basic CSS for parallax scrolling.
If you would like to see some completed examples you can check out my travel and animal parallax examples:
