No Javascript required. Just plain CSS.
A Pen by Yago Estévez on CodePen.
No Javascript required. Just plain CSS.
A Pen by Yago Estévez on CodePen.
header | |
h1 CSS-Only Parallax Effect | |
section.section1 | |
h1 Section w/o parallax effect | |
section.section2 | |
h1 Section w/ parallax effect | |
div.author | |
a( | |
href = "https://twitter.com/yagoestevez" | |
target = "_blank" | |
rel = "noopener noreferrer" | |
title = "Link to author's Twitter Profile" | |
) Yago Estévez |
/************************************************************* | |
HEADER | |
**************************************************************/ | |
header { | |
position: relative; | |
min-height: 100vh; | |
width: 100%; | |
transform-style: inherit; | |
z-index: -1; | |
} | |
header::before { | |
content: ''; | |
position: absolute; | |
top: 0; left: 0; right: 0; bottom: 0; | |
display: block; | |
background: url(https://picsum.photos/g/1921/1081?random) top center; | |
background-size: cover; | |
transform: translateZ(-1px) scale(2.1); | |
min-height: 100%; | |
z-index: -2; | |
} | |
/************************************************************* | |
SECTIONS | |
**************************************************************/ | |
section { | |
position: relative; | |
min-height: 100vh; | |
width: 100%; | |
position: relative; | |
transform-style: inherit; | |
} | |
.section1 { | |
background: #fafafa; | |
box-shadow: 0 0 20px #333; | |
z-index: 1; | |
} | |
.section2::before { | |
content: ''; | |
position: absolute; | |
top: 0; left: 0; right: 0; bottom: 0; | |
display: block; | |
background: url(https://picsum.photos/g/1920/1080?random) top center; | |
background-size: cover; | |
transform: translateZ(-.5px) scale(1.6); | |
z-index: -1; | |
} | |
/************************************************************* | |
HEADINGS | |
**************************************************************/ | |
h1 { | |
font-size: 4rem; | |
text-align: center; | |
position: absolute; | |
padding: 1rem; | |
background: #fafafa; | |
box-shadow: 0 0 20px #333; | |
top: 50%; | |
left: 50%; | |
transform: translateZ(-1px) scale(2) translate(-25%, -25%); | |
} | |
.section1 h1 { | |
z-index: 3; | |
transform: translate(-50%, -50%); | |
box-shadow: none; | |
} | |
.section2 h1 { | |
transform: translateZ(-.3px) scale(1.3) translate(-39%, -39%); | |
z-index: 3; | |
} | |
/************************************************************* | |
BASIC STYLES | |
**************************************************************/ | |
*, | |
*::before, | |
*::after, | |
:root { | |
margin: 0; | |
padding: 0; | |
box-sizing: border-box; | |
} | |
@import 'https://fonts.googleapis.com/css?family=Overlock:400,400i,700|Oleo+Script'; | |
html { | |
overflow: hidden; | |
height: 100%; | |
} | |
body { | |
overflow-x: hidden; | |
overflow-y: scroll; | |
height: 100%; | |
perspective: 1px; | |
transform-style: preserve-3d; | |
font-size: 62.5%; | |
font-family: 'Overlock', Arial, Helvetica, sans-serif; | |
} | |
.author { | |
position: absolute; | |
z-index: 999; | |
top: 0; | |
right: 0; | |
padding: .5rem 1rem; | |
background: #fafafa; | |
border-bottom-left-radius: 5px; | |
transition: 300ms; | |
} | |
.author a, | |
.author a:visited { | |
color: #333; | |
text-decoration: none; | |
display: block; | |
transition: 300ms; | |
} | |
.author:hover, | |
.author:active { | |
box-shadow: 0 0 10px #33333350; | |
} |