Parallax backgrounds with walk cycle

Developer
Rachel Nabors
Size
2,822 Kb
Views
89,056
  1. Parallax backgrounds with walk cycle Previews
  2. Parallax backgrounds with walk cycle HTML Codes
  3. Parallax backgrounds with walk cycle CSS Codes

How do I make an parallax backgrounds with walk cycle?

Multiple background images with CSS3 animation create a multi-depth parallax effect. This is what parallax was meant for.. What is a parallax backgrounds with walk cycle? How do you make a parallax backgrounds with walk cycle? This script and codes were developed by Rachel Nabors on 14 June 2022, Tuesday.

Parallax backgrounds with walk cycle Previews
IQ Test

Parallax backgrounds with walk cycle - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Parallax backgrounds with walk cycle</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .tuna { animation: walk-cycle 1s steps(12) infinite; background: url(http://stash.rachelnabors.com/img/codepen/tuna_sprite.png) 0 0 no-repeat; height: 200px; width: 400px; position: absolute; bottom: 1px; left: 50%; margin-left: -200px; transform: translateZ(0); /* offers a bit of a performance boost by pushing some of this processing to the GPU in Safari*/
}
@keyframes walk-cycle { 0% {background-position: 0 0; } 100% {background-position: 0 -2391px; }
}
.foreground, .midground, .background { width: 100%; height: 100%; position: absolute; top: 0; left: 0; translate3d(0,0,0);
}
.foreground { animation: parallax_fg linear 10s infinite both; background: url(http://stash.rachelnabors.com/24ways2012/foreground_grass.png) 0 100% repeat-x; z-index: 3;
}
@keyframes parallax_fg { 0% { background-position: -3584px 100%;} 100% {background-position: 0 100%; }
}
.midground { animation: parallax_mg linear 20s infinite; background: url(http://stash.rachelnabors.com/24ways2012/midground_grass.png) 0 100% repeat-x; z-index: 2;
}
@keyframes parallax_mg { 0% { background-position: -3000px 100%;} 100% {background-position: 0 100%; }
}
.background { background-image: url(http://stash.rachelnabors.com/24ways2012/background_mountain5.png), url(http://stash.rachelnabors.com/24ways2012/background_mountain4.png), url(http://stash.rachelnabors.com/24ways2012/background_mountain3.png), url(http://stash.rachelnabors.com/24ways2012/background_mountain2.png), url(http://stash.rachelnabors.com/24ways2012/background_mountain1.png); background-repeat: repeat-x; background-position: 0 100%; z-index: 1; animation: parallax_bg linear 40s infinite;
}
@keyframes parallax_bg { 100% { background-position-x: 2400px, 2000px, 1800px, 1600px, 1200px;}
}
body { background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%), #d2d2d2 url(http://stash.rachelnabors.com/24ways2012/background_clouds.png);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="foreground"></div>
<div class="midground"> <div class="tuna"></div>
</div>
<div class="background">
</div>
</body>
</html>

Parallax backgrounds with walk cycle - Script Codes CSS Codes

.tuna { animation: walk-cycle 1s steps(12) infinite; background: url(http://stash.rachelnabors.com/img/codepen/tuna_sprite.png) 0 0 no-repeat; height: 200px; width: 400px; position: absolute; bottom: 1px; left: 50%; margin-left: -200px; transform: translateZ(0); /* offers a bit of a performance boost by pushing some of this processing to the GPU in Safari*/
}
@keyframes walk-cycle { 0% {background-position: 0 0; } 100% {background-position: 0 -2391px; }
}
.foreground, .midground, .background { width: 100%; height: 100%; position: absolute; top: 0; left: 0; translate3d(0,0,0);
}
.foreground { animation: parallax_fg linear 10s infinite both; background: url(http://stash.rachelnabors.com/24ways2012/foreground_grass.png) 0 100% repeat-x; z-index: 3;
}
@keyframes parallax_fg { 0% { background-position: -3584px 100%;} 100% {background-position: 0 100%; }
}
.midground { animation: parallax_mg linear 20s infinite; background: url(http://stash.rachelnabors.com/24ways2012/midground_grass.png) 0 100% repeat-x; z-index: 2;
}
@keyframes parallax_mg { 0% { background-position: -3000px 100%;} 100% {background-position: 0 100%; }
}
.background { background-image: url(http://stash.rachelnabors.com/24ways2012/background_mountain5.png), url(http://stash.rachelnabors.com/24ways2012/background_mountain4.png), url(http://stash.rachelnabors.com/24ways2012/background_mountain3.png), url(http://stash.rachelnabors.com/24ways2012/background_mountain2.png), url(http://stash.rachelnabors.com/24ways2012/background_mountain1.png); background-repeat: repeat-x; background-position: 0 100%; z-index: 1; animation: parallax_bg linear 40s infinite;
}
@keyframes parallax_bg { 100% { background-position-x: 2400px, 2000px, 1800px, 1600px, 1200px;}
}
body { background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%), #d2d2d2 url(http://stash.rachelnabors.com/24ways2012/background_clouds.png);
}
Parallax backgrounds with walk cycle - Script Codes
Parallax backgrounds with walk cycle - Script Codes
Home Page Home
Developer Rachel Nabors
Username rachelnabors
Uploaded June 14, 2022
Rating 4.5
Size 2,822 Kb
Views 89,056
Do you need developer help for Parallax backgrounds with walk cycle?

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!

Rachel Nabors (rachelnabors) Script Codes
Name
Walkcycle with music loop
Spinner
Down the Hipster Rabbit Hole
Crisp lines at smaller sizes
From walk to run
Text Clipping Sass mixin
Loading Tuna in the Window
Bright Lights, Big Kitty
Yarn Loader
Key Press SVG illustration with CSS animation
Create amazing art & images 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!