Author: | jamesv28 |
---|---|
Views Total: | 18,596 views |
Official Page: | Go to website |
Last Update: | November 15, 2014 |
License: | MIT |
Preview:

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"); }