Author: | kenyk7 |
---|---|
Views Total: | 7,543 views |
Official Page: | Go to website |
Last Update: | September 3, 2016 |
License: | MIT |
Preview:

Description:
A pure CSS solution of implementing a fixed-position parallax effect on background images when scrolling down the webpage. Works both on mobile and desktop.
How to use it:
The html structure for the parallax area.
<div class="parrallax-content"> <div class="parrallax"> </div> </div>
Add a background to the parallax area.
.parrallax-content{ background-image: url(1.jpg); }
The core CSS styles for the parallax scroll effect.
.parrallax-content{ position: relative; overflow: hidden; height: 80vh; -webkit-background-size: cover; background-size: cover; background-attachment: fixed; background-position: center center; } .parrallax { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } .parrallax:before { content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; height: 100%; z-index: -1; background-position: center top; background-repeat: no-repeat; background-size: 120% auto; }
Worst experience on mobile, The demo just dont work and is a mess.