Parallax Scrolling Tutorial

Parallax Scrolling Tutorial

2 68485
Parallax Scrolling Tutorial

As you probably know, Parallax is a visual effect, where positions of objects look differently when we view them from different positions. The parallax scrolling creates the illusion that the two objects that are in line of sight, but at a distance from each other, moving at different speeds. This effect we can see everywhere when we in the movement: when we go along the street, we see that all nearest things move much faster than distant things, when we drive a car we can see that the trees and shrubs near the road sweep very quickly, and the rear landscape, such as mountains, moving very slowly. This effect is Parallax motion.

This effect can be applied to web pages: we can apply the parallax effect to blocks that contain background images and some internal content. When we scroll the page, the content is scrolling, but the background should stay in place. CSS will help us to create this effect.

Step 1 – HTML

<section class="section parallax parallax-1">
  <div class="container">
    <h1>Section 1</h1>
  </div>
</section>
<section class="section content">
  <div class="container">
    <h2>Simple title 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus id nunc ut gravida. Vestibulum ac...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
  </div>
</section>
<section class="section parallax parallax-2">
  <div class="container">
    <h1>Section 2</h1>
  </div>
</section>
<section class="section content">
  <div class="container">
    <h2>Simple title 2</h2>
    <p>Nam imperdiet posuere bibendum. Aliquam nec consectetur metus. Aliquam egestas a elit at malesuada...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
  </div>
</section>
<section class="section parallax parallax-3">
  <div class="container">
    <h1>Section 3</h1>
  </div>
</section>
<section class="section content">
  <div class="container">
    <h2>Simple title 3</h2>
    <p>Proin tempor urna vitae tortor porttitor, ac malesuada elit lacinia. Nulla ac tellus nulla. Donec iaculis...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
  </div>
</section>

As you can see, the html markup doesn’t seem complex. Here are 6 alternate sections: three of them contain background images (sections with class parallax), three contain some dummy text (sections with class content).

Step 2 – Images

All background images have fixed size 1600×600 pixels. It let us use the images on most screen resolutions (responsive layout). All our parallax blocks have the same fixed height (600px).

Step 3 – CSS

Now we need to expand the images to fill the whole available space, we set background-size: cover and then we set background-attachment: fixed to fix the background.

.container {
  max-width: 960px;
  margin: 0 auto;
}
section.section:last-child {
  margin-bottom: 0;
}
section.section h2 {
  margin-bottom: 40px;
  font-family: "Roboto Slab", serif;
  font-size: 30px;
}
section.section p {
  margin-bottom: 40px;
  font-size: 16px;
  font-weight: 300;
}
section.section p:last-child {
  margin-bottom: 0;
}
section.section.content {
  padding: 40px 0;
}
section.section.parallax {
  height: 600px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
section.section.parallax h1 {
  color: rgba(255, 255, 255, 0.8);
  font-size: 48px;
  line-height: 600px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
section.section.parallax-1 {
  background-image: url("../imgages/1.jpg");
}
section.section.parallax-2 {
  background-image: url("../imgages/2.jpg");
}
section.section.parallax-3 {
  background-image: url("../imgages/3.jpg");
}
@media all and (min-width: 600px) {
  section.section h2 {
    font-size: 42px;
  }
  section.section p {
    font-size: 20px;
  }
  section.section.parallax h1 {
    font-size: 96px;
  }
}
@media all and (min-width: 960px) {
  section.section.parallax h1 {
    font-size: 160px;
  }
}

Besides of styles for our sections, we added several responsive styles (for smaller screen resolutions).


Live Demo

[sociallocker]

download the sources

[/sociallocker]

Conclusion

In question of the browser support – most modern browsers support this technique. But IE8 (and below) doesn’t support the background-size property. However I think that this is not a problem nowadays.

Today we implemented the basic parallax scrolling page. I hope that you like our result. See you later.


2 COMMENTS

  1. As you write near the end, this is just a basic Parallax effect. A better version would go further and make the background image’s position change with scroll.

Leave a Reply