Author: | ihorko95 |
---|---|
Views Total: | 3,591 views |
Official Page: | Go to website |
Last Update: | May 15, 2020 |
License: | MIT |
Preview:

Description:
A JavaScript & CSS solution that applies an interactive 3D parallax scroll effect to different layers within the document on page scroll.
How to use it:
1. Add layers to the parallax container.
<div class="paralax"> <div class="paralax__item p-item1"></div> <div class="paralax__item p-item2"></div> <div class="paralax__item p-item3"></div> <div class="paralax__item p-item4"></div> </div>
2. Add depth & background images to the layers.
.paralax { position: absolute; height: 100%; } .paralax__item { position: fixed; width: 100%; height: 100%; top: 0; left: 0; } .p-item1 { background: url("1.png") center/cover no-repeat; } .p-item2 { background: url("2.png") bottom right/45% no-repeat; z-index: 2; } .p-item3 { background: url("3.png") bottom/100% no-repeat; z-index: 2; } .p-item4 { background: url("4.png") bottom/100% no-repeat; z-index: 2; } .p-item4::before { position: absolute; top: 0; left: 0; width: 10000%; height: 100%; content: ''; background: url("2.png") repeat-x; background-size: contain; background-position: center; -webkit-animation: marquee 20s linear infinite; animation: marquee 20s linear infinite; z-index: 1; } @-webkit-keyframes marquee { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(-200vw, 0, 0); transform: translate3d(-200vw, 0, 0); } } @keyframes marquee { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(-200vw, 0, 0); transform: translate3d(-200vw, 0, 0); } }
3. Load the main JavaScript parallax.js at the end of the document. That’ it.
<script src="paralax.js"></script>