How To Create a Parallax Scrolling Website | Part 2

One of the biggest trends in web design is the famed parallax scroll effect. In this second installment of this tutorial, we’ll be finishing off our basic parallax website by adding background and foreground objects. 
If you missed Part 1 and want to quickly catch up, you can can read it all here.

Download Source Files View Demo

---

The Theory

As we discussed in Part 1, one of the most important parts of creating a parallax effect, is creating depth. A big part of this is done by creating background and foreground objects that scroll at different speeds, relative to the background. An object that’s closer, will appear larger, but should also move more quickly. Background objects are the opposite. This is the essence of what a parallax effect is, in both web and the real-world.
If you still find it difficult understanding the concept, here’s an example. Say you’re in a car on the highway, your travelling at 100 km/h. If you look out the window to the side, objects that are closer will appear to move faster than those at a distance. The further you look into the horizon, the slower the objects appear to move.

---

Adding Objects

Starting off, where we left-off in Part 1, Let’s add some objects to one of the slides. We’ll be adding some 3D letters, as well as some circles:

div class="slide" id="slide4" data-slide="4" data-stellar-background-ratio="0">
<div class="wrapper">
<div class="letter" id="letter-a" data-stellar-ratio="1.6" data-stellar-vertical-offset="-375"></div>
<div class="letter" id="letter-b" data-stellar-ratio="0.5" data-stellar-vertical-offset="-124"></div>
<div class="letter" id="letter-c" data-stellar-ratio="1.6" data-stellar-vertical-offset="-450"></div>
<div class="circle yellow small" id="circle1" data-stellar-ratio="0.5" data-stellar-vertical-offset="-150" style="left:-400px !important;"></div>
<div class="circle yellow small" data-stellar-ratio="0.5" data-stellar-vertical-offset="-170" style="left:645px !important;"></div>
<div class="circle yellow medium" data-stellar-ratio="1.6" data-stellar-vertical-offset="-250" style="left:-610px !important;"></div>
<div class="circle yellow large" data-stellar-ratio="1.6" data-stellar-vertical-offset="-950" style="left:600px !important;"></div>
<div class="circle yellow large" data-stellar-ratio="2" data-stellar-vertical-offset="-770" style="left:-1150px !important;"></div>
</div>

Styling The Objects

As you can see, we’ve added a wrapper inside the slide – this is just to keep the objects horizontally centred. Next I’ve added the letters, along with some circles of varying size. As you can see, the larger the circle or object, the higher “data-stellar-ratio” used, which controls the speed the object scrolls at. Finally, so all the objects aren’t on the same horizontal axis, we can offset them vertically using the “data-stellar-vertical-offset” attribute. This simply offsets the object vertically by a given amount.

---

Now let’s style our objects in CSS:

/******************************
PARALLAX OBJECTS
*******************************/
.wrapper {
width: 1300px;
height: 150%;
overflow: visible;
margin: 0 auto;
position: absolute;
left: 50%;
text-align: center;
margin-left: -650px;
}
.letter {
position: relative;
background-position: center !important;
display: inline-block !important;
}
#letter-a {
width: 120px;
height: 130px;
background: url(../images/letter_a.png) no-repeat;
left: 120px;
-webkit-background-size: 120px 130px;
-moz-background-size: 120px 130px;
background-size: 120px 130px;
right:425px;
left:0 !important;
}
#letter-b {
width: 58px;
height: 98px;
background: url(../images/letter_b.png) no-repeat;
-webkit-background-size: 58px 90px;
-moz-background-size: 58px 90px;
background-size: 58px 90px;
left: 100px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
right:335px;
left:0 !important;
}
#letter-c {
width: 130px;
height: 177px;
background: url(../images/letter_c.png) no-repeat;
-webkit-background-size: 130px 177px;
-moz-background-size: 130px 177px;
background-size: 130px 177px;
left: 305px;
}
.circle {
margin: 0 auto;
position: relative;
background-position: center !important;
display: inline-block !important;
}
.yellow {
background-color: #ffee00;
}
.black {
background-color: #1a1a1a;
}
.small {
width:60px;
height:60px;
border-radius:30px;
}
.medium {
width: 120px;
height: 120px;
border-radius: 60px;
}
.large {
width: 240px;
height: 240px;
border-radius: 120px;
}

As you can see, we basically just set a background image for the letters. The circles are created using pure CSS by setting a width and height, and setting the border-radius to half of those values. If you scroll through slide 4, the objects should create depth through size and scroll speed variances. Pretty cool right?

---

Conclusion

As you can see, we can create a simple parallax site quite quickly and easily. Using a plugin is one way to achieve this is just way of doing it. There are so many options, to create different effects. If you really want to tailor the parallax effect to specifics, I would advise creating the effect from scratch, which can be done quite easily using jQuery. The important thing here is understanding how it works and the core principles, once you’ve done that, you can create some awesome effects!

<< Part1