Created
October 18, 2022 18:36
-
-
Save lorens-osman-dev/dd8e786728c342fc23b390511a41460c to your computer and use it in GitHub Desktop.
Parallax animation hero
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="hero"> | |
<div class="parallax-layer layer-6"></div> | |
<div class="parallax-layer layer-5"></div> | |
<div class="parallax-layer layer-4"></div> | |
<div class="parallax-layer bike-1"></div> | |
<div class="parallax-layer bike-2"></div> | |
<div class="parallax-layer layer-3"></div> | |
<div class="parallax-layer layer-2"></div> | |
<div class="parallax-layer layer-1"></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
* { | |
box-sizing: border-box; | |
} | |
body { | |
font-family: 'Lato', sans-serif; | |
} | |
.hero { | |
width: 100%; | |
height:100%; | |
min-height: 450px; | |
position: relative; | |
top: 0; | |
left: 0; | |
background-color: #d9edfd; | |
transform: translate3d(0,0,0); | |
} | |
@each $index, $speed, $height in (1, 20s, 136px), | |
(2, 30s, 145px), | |
(3, 55s, 158px), | |
(4, 75s, 468px), | |
(5, 95s, 311px), | |
(6, 120s, 222px) { | |
.layer-#{$index} { | |
animation: parallax_fg linear $speed infinite both; | |
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/24650/#{$index}.png) 0 100% repeat-x; | |
z-index: 1; | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
background-size: auto $height; | |
} | |
} | |
.bike-1, .bike-2 { | |
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/24650/bike.png) 0 100% no-repeat; | |
z-index: 1; | |
position: absolute; | |
bottom: 100px; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
background-size: auto 75px; | |
animation: parallax_bike linear 10s infinite both; | |
} | |
.bike-2 { | |
animation: parallax_bike linear 15s infinite both; | |
} | |
@keyframes parallax_fg { | |
0% { background-position: 2765px 100%;} | |
100% {background-position: 550px 100%; } | |
} | |
@keyframes parallax_bike { | |
0% { background-position: -300px 100%;} | |
100% {background-position: 2000px 100%; } | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment