CSS Only Parallax

Developer
Matt Shull
Size
2,449 Kb
Views
24,288
  1. CSS Only Parallax Previews
  2. CSS Only Parallax HTML Codes
  3. CSS Only Parallax CSS Codes

How do I make an css only parallax?

This is a CSS only parallax effect as shown from this article: http://keithclark.co.uk/articles/pure-css-parallax-websites/. What is a css only parallax? How do you make a css only parallax? This script and codes were developed by Matt Shull on 28 September 2022, Wednesday.

CSS Only Parallax Previews
IQ Test

CSS Only Parallax - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Only Parallax</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="parallax"> <div id="group1" class="parallax__group"> <div class="parallax__layer parallax__layer--base"> <div class="title">Base Layer</div> </div> </div> <div id="group2" class="parallax__group"> <div class="parallax__layer parallax__layer--base"> <div class="title">Base Layer</div> </div> <div class="parallax__layer parallax__layer--back"> <div class="title">Background Layer</div> </div> </div> <div id="group3" class="parallax__group"> <div class="parallax__layer parallax__layer--fore"> <div class="title">Foreground Layer</div> </div> <div class="parallax__layer parallax__layer--base"> <div class="title">Base Layer</div> </div> </div> <div id="group4" class="parallax__group"> <div class="parallax__layer parallax__layer--base"> <div class="title">Base Layer</div> </div> <div class="parallax__layer parallax__layer--back"> <div class="title">Background Layer</div> </div> <div class="parallax__layer parallax__layer--deep"> <div class="title">Deep Background Layer</div> </div> </div> <div id="group5" class="parallax__group"> <div class="parallax__layer parallax__layer--fore"> <div class="title">Foreground Layer</div> </div> <div class="parallax__layer parallax__layer--base"> <div class="title">Base Layer</div> </div> </div> <div id="group6" class="parallax__group"> <div class="parallax__layer parallax__layer--back"> <div class="title">Background Layer</div> </div> <div class="parallax__layer parallax__layer--base"> <div class="title">Base Layer</div> </div> </div> <div id="group7" class="parallax__group"> <div class="parallax__layer parallax__layer--base"> <div class="title">Base Layer</div> </div> </div> </div>
</body>
</html>

CSS Only Parallax - Script Codes CSS Codes

 /* Parallax base styles --------------------------------------------- */ .parallax { height: 500px; /* fallback for older browsers */ height: 100vh; overflow-x: hidden; overflow-y: auto; -webkit-perspective: 300px; perspective: 300px; } .parallax__group { position: relative; height: 500px; /* fallback for older browsers */ height: 100vh; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .parallax__layer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .parallax__layer--fore { -webkit-transform: translateZ(90px) scale(.7); transform: translateZ(90px) scale(.7); z-index: 1; } .parallax__layer--base { -webkit-transform: translateZ(0); transform: translateZ(0); z-index: 4; } .parallax__layer--back { -webkit-transform: translateZ(-300px) scale(2); transform: translateZ(-300px) scale(2); z-index: 3; } .parallax__layer--deep { -webkit-transform: translateZ(-600px) scale(3); transform: translateZ(-600px) scale(3); z-index: 2; } /* Debugger styles - used to show the effect --------------------------------------------- */ .debug { position: fixed; top: 0; left: .5em; z-index: 999; background: rgba(0,0,0,.85); color: #fff; padding: .5em; border-radius: 0 0 5px 5px; } .debug-on .parallax__group { -webkit-transform: translate3d(800px, 0, -800px) rotateY(30deg); transform: translate3d(700px, 0, -800px) rotateY(30deg); } .debug-on .parallax__layer { box-shadow: 0 0 0 2px #000; opacity: 0.9; } .parallax__group { -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; } /* demo styles --------------------------------------------- */ body, html { overflow: hidden; } body { font: 100% / 1.5 Arial; } * { margin:0; padding:0; } .parallax { font-size: 200%; } /* centre the content in the parallax layers */ .title { text-align: center; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /* style the groups --------------------------------------------- */ #group1 { z-index: 5; /* slide over group 2 */ } #group1 .parallax__layer--base { background: rgb(102,204,102); } #group2 { z-index: 3; /* slide under groups 1 and 3 */ } #group2 .parallax__layer--back { background: rgb(123,210,102); } #group3 { z-index: 4; /* slide over group 2 and 4 */ } #group3 .parallax__layer--base { background: rgb(153,216,101); } #group4 { z-index: 2; /* slide under group 3 and 5 */ } #group4 .parallax__layer--deep { background: rgb(184,223,101); } #group5 { z-index: 3; /* slide over group 4 and 6 */ } #group5 .parallax__layer--base { background: rgb(214,229,100); } #group6 { z-index: 2; /* slide under group 5 and 7 */ } #group6 .parallax__layer--back { background: rgb(245,235,100); } #group7 { z-index: 3; /* slide over group 7 */ } #group7 .parallax__layer--base { background: rgb(255,241,100); } /* misc --------------------------------------------- */ .demo__info { position: absolute; z-index:100; bottom: 1vh; top: auto; font-size:80%; text-align:center; width: 100%; }
CSS Only Parallax - Script Codes
CSS Only Parallax - Script Codes
Home Page Home
Developer Matt Shull
Username derekshull
Uploaded September 28, 2022
Rating 3
Size 2,449 Kb
Views 24,288
Do you need developer help for CSS Only Parallax?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Matt Shull (derekshull) Script Codes
Name
Shopping List App
Template Style Prototype
San Jose Business Listings
Angular 2-way Data Binding Example
AngularJS Dropdown Menu
Shopping List Example
Tri-Cities Wireframe
Javascript Highest Number from List
CSS Only Dropdown Menus
Inline vs Inline Block vs Block
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!