Parallax Landscape CSS only

HTML
<div class="bg"></div> <div class="parallax"> <div class="parallax-group"> <div class="layer"></div> <div class="layer"></div> <div class="layer"></div> <div class="layer"></div> <div class="layer"></div> <div class="layer fill"></div> </div> <div class="content"> <h1>Parallax Scrolling</h1> <p>Using only CSS</p> </div> </div>
CSS
.bg { position: absolute; height: 100%; width: 100%; top: 0px; z-index: 0; background-color: #ffe4c7; } .layer { position: fixed; top: 0px; margin: auto; width: 100%; z-index: 100; min-height: 400px; top: 0; left: 0; right: 0; bottom: 0; background-position: top center; background-repeat: no-repeat; } .parallax { height: 100vh; overflow-x: hidden; overflow-y: scroll; -webkit-perspective: 1px; perspective: 1px; } .parallax-group { position: relative; height: 100vh; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .parallax-group div:nth-child(1) { background-color: #ffe4c7; margin-top: 600px; background-color: #d9d1b8; -webkit-transform: translateZ(-12px) scale(13); transform: translateZ(-12px) scale(13); } .parallax-group div:nth-child(1):before { content: ""; width: 100%; height: 200px; position: absolute; bottom: 100%; left: 0; background-image: -webkit-linear-gradient(315deg, transparent 66%, #d9d1b8 66.01%), -webkit-linear-gradient(45deg, #d9d1b8 34%, transparent 34.01%); background-image: linear-gradient(135deg, transparent 66%, #d9d1b8 66.01%), linear-gradient(45deg, #d9d1b8 34%, transparent 34.01%); background-position: 53px 0px; background-size: 200px 100%; background-repeat: repeat-x; } .parallax-group div:nth-child(2) { background-color: #ffe4c7; margin-top: 900px; background-color: #b3beaa; -webkit-transform: translateZ(-10px) scale(11); transform: translateZ(-10px) scale(11); } .parallax-group div:nth-child(2):before { content: ""; width: 100%; height: 200px; position: absolute; bottom: 100%; left: 0; background-image: -webkit-linear-gradient(315deg, transparent 66%, #b3beaa 66.01%), -webkit-linear-gradient(45deg, #b3beaa 34%, transparent 34.01%); background-image: linear-gradient(135deg, transparent 66%, #b3beaa 66.01%), linear-gradient(45deg, #b3beaa 34%, transparent 34.01%); background-position: 135px 0px; background-size: 200px 100%; background-repeat: repeat-x; } .parallax-group div:nth-child(3) { background-color: #ffe4c7; margin-top: 1200px; background-color: #8cab9b; -webkit-transform: translateZ(-8px) scale(9); transform: translateZ(-8px) scale(9); } .parallax-group div:nth-child(3):before { content: ""; width: 100%; height: 200px; position: absolute; bottom: 100%; left: 0; background-image: -webkit-linear-gradient(315deg, transparent 66%, #8cab9b 66.01%), -webkit-linear-gradient(45deg, #8cab9b 34%, transparent 34.01%); background-image: linear-gradient(135deg, transparent 66%, #8cab9b 66.01%), linear-gradient(45deg, #8cab9b 34%, transparent 34.01%); background-position: 265px 0px; background-size: 200px 100%; background-repeat: repeat-x; } .parallax-group div:nth-child(4) { background-color: #ffe4c7; margin-top: 1500px; background-color: #66988d; -webkit-transform: translateZ(-6px) scale(7); transform: translateZ(-6px) scale(7); } .parallax-group div:nth-child(4):before { content: ""; width: 100%; height: 200px; position: absolute; bottom: 100%; left: 0; background-image: -webkit-linear-gradient(315deg, transparent 66%, #66988d 66.01%), -webkit-linear-gradient(45deg, #66988d 34%, transparent 34.01%); background-image: linear-gradient(135deg, transparent 66%, #66988d 66.01%), linear-gradient(45deg, #66988d 34%, transparent 34.01%); background-position: 176px 0px; background-size: 200px 100%; background-repeat: repeat-x; } .parallax-group div:nth-child(5) { background-color: #ffe4c7; margin-top: 1800px; background-color: #40867e; -webkit-transform: translateZ(-4px) scale(5); transform: translateZ(-4px) scale(5); } .parallax-group div:nth-child(5):before { content: ""; width: 100%; height: 200px; position: absolute; bottom: 100%; left: 0; background-image: -webkit-linear-gradient(315deg, transparent 66%, #40867e 66.01%), -webkit-linear-gradient(45deg, #40867e 34%, transparent 34.01%); background-image: linear-gradient(135deg, transparent 66%, #40867e 66.01%), linear-gradient(45deg, #40867e 34%, transparent 34.01%); background-position: 120px 0px; background-size: 200px 100%; background-repeat: repeat-x; } .parallax-group div:nth-child(6) { background-color: #ffe4c7; margin-top: 2100px; background-color: #1a7370; -webkit-transform: translateZ(-2px) scale(3); transform: translateZ(-2px) scale(3); } .parallax-group div:nth-child(6):before { content: ""; width: 100%; height: 200px; position: absolute; bottom: 100%; left: 0; background-image: -webkit-linear-gradient(315deg, transparent 66%, #1a7370 66.01%), -webkit-linear-gradient(45deg, #1a7370 34%, transparent 34.01%); background-image: linear-gradient(135deg, transparent 66%, #1a7370 66.01%), linear-gradient(45deg, #1a7370 34%, transparent 34.01%); background-position: 128px 0px; background-size: 200px 100%; background-repeat: repeat-x; } .content { position: relative; background-color: transparent; font-family: "Arial"; letter-spacing: 10px; text-transform: uppercase; line-height: 40px; z-index: 10; width: 100%; font-size: 15px; text-align: center; color: white; margin-top: 1000px; -webkit-transform: translateZ(-2px) scale(3); transform: translateZ(-2px) scale(3); } .fill { height: 80%; }
JAVASCRIPT
Expand for more options Login