Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Parallax Scrolling Tutorial

DZone's Guide to

Parallax Scrolling Tutorial

· Web Dev Zone
Free Resource

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

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

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.

- See more at: http://www.script-tutorials.com/parallax-scrolling-tutorial/#sthash.wRgETGzG.dpuf





Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda

Topics:
html5 ,design ,ux

Published at DZone with permission of Andrey Prikaznov, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}