Author: | adam-m-denny |
---|---|
Views Total: | 4,992 views |
Official Page: | Go to website |
Last Update: | August 17, 2015 |
License: | MIT |
Preview:

Description:
A pure CSS solution to create the familiar parallax scroll effect on background images using CSS3 2D transforms (translate and scale).
How to use it:
Create a container that has a parallax background images.
<section id="parallax"> <div class="back"> <h2>Parallax Container</h2> </div> </section>
The core CSS styles.
section { position: relative; min-height: 100vh; box-sizing: border-box; transform-style: inherit; overflow: hidden; } section .back { width: 100%; height: 100%; background-position: center center; transform: translateZ(-2px) scale(3); }
Add a background image to the container.
#parallax .back { background-image: url(bg.jpg); }