Pure CSS Parallax Background Images

Category: Animation , CSS & CSS3 | November 15, 2014
Author: jamesv28
Views Total: 7,166
Official Page: Go to website
Last Update: November 15, 2014
License: MIT

Preview:

Pure CSS Parallax Background Images

Description:

An extremely simple CSS solution to apply Parallax scrolling effects on your background images as you scroll down the webpage.

How to use it:

Create a set of containers for the parallax backgrounds.

<section class="module parallax parallax-1">
  <div class="container">
    <h1>Section 1</h1>
  </div>
</section>

<section class="module parallax parallax-2">
  <div class="container">
    <h1>Section 2</h1>
  </div>
</section>

<section class="module parallax parallax-3">
  <div class="container">
    <h1>Section 3</h1>
  </div>
</section>

Apply the Parallax scrolling effects on these containers using CSS background properties.

section.module.parallax {
  height: 600px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

Add the background images to the containers.

section.module.parallax-1 { background-image: url("1.jpg"); }

section.module.parallax-2 { background-image: url("2.jpg"); }

section.module.parallax-3 { background-image: url("3.jpg"); }

You Might Be Interested In:


Leave a Reply