Author: | SiaKovalina |
---|---|
Views Total: | 8,934 views |
Official Page: | Go to website |
Last Update: | April 26, 2018 |
License: | MIT |
Preview:

Description:
A smooth, mobile-compatible parallax scroll effect built in with vanilla JavaScript and CSS3 2D transforms.
How to use it:
Create several layers on which you want to apply the parallax scroll effect.
<header class="hero"> <div class="back-el"></div> <div class="main-el"></div> <div class="fore-el"></div> </header>
Add background images to the layers.
.hero { height: 600px; position: relative; background: url(bg.jpg); background-size: contain; background-position: top center; background-attachment: fixed; overflow: hidden; } .main-el { height: 100px; width: 100%; background-image: url(main.jpg); background-repeat: no-repeat; background-position: center; position: absolute; top: 50%; margin-top: -50px; } .fore-el { background-color: transparantize(pink, 0.5); background-image: url(fore.png); height: 733px; width: 960px; background-repeat: no-repeat; background-position: right bottom; position: absolute; left: 50%; margin-left: -480px; top: 380px; } .back-el { width: 960px; height: 298px; background-image: url(back.png); background-repeat: no-repeat; background-position: top left; position: absolute; left: 50%;; margin-left: -480px; }
The JavaScript to enable the parallax scroll effect using CSS3 2D transforms.
window.addEventListener('scroll', scrollFunc); function scrollFunc() { var windowScroll = this.scrollY; var $logo = document.getElementsByClassName('main')[0]; $logo.style.transform = 'translateY(' + windowScroll/2 + '%)'; var $backBird = document.getElementsByClassName('back-el')[0]; $backBird.style.transform = 'translateY(' + windowScroll/4 + '%)'; var $foreBird = document.getElementsByClassName('fore-el')[0]; $foreBird.style.transform = 'translateY(-' + windowScroll/100 + '%)'; }