A parallax effect purely done in CSS, taken from: http://blog.keithclark.co.uk/pure-css-parallax-websites/
Forked from CombatCreative/Pure CSS parallax scrolling.markdown
Created
July 30, 2017 18:37
-
-
Save stemar/a5ae6f40310855befa5d931d3db369e7 to your computer and use it in GitHub Desktop.
Pure CSS parallax scrolling
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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; | |
} | |
/* 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); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment