CSS3 Animations: parallax scrolling

Parallax Scrolling Animation

When placing several layers, with photos or images, in a web page, and moving them around at different speeds, we create an effect that we call Parallax Scrolling. This technique creates the illusion of depth. For this technique, we use keyframe animations and transforms.

The HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
	<div id="wood">
<div id="trees1"></div>
<div id="shadow"></div>
<div id="robot"></div>
</div> </body> </html>

The CSS

body{
  margin:0;
  }
@keyframes woodMove {
  0% {  background-position: 0% 0%; }
  100% {  background-position: -100% 0%;}
}
@-webkit-keyframes woodMove {
  0% {  background-position: 0% 0%; }
  100% {  background-position: -100% 0%;}
}
#wood {
  background-image: url('../../images/wood.jpg');
  overflow: hidden;
  width: 100%;
  height: 2000px;
  position: relative;
  -webkit-animation: woodMove 60s linear infinite;
  -moz-animation: woodMove 60s linear infinite;
}
@keyframes trees1 {
  0% {  background-position: 0% 0%; }
  100% {  background-position: -100% 0%;}
}
  
@-webkit-keyframes trees1 {
  0% {  }
  100% {
  /* ends off to the left of the containing element */
  left: -60px;
  }
}
#trees1 {
  width: 100%;
  height: 2000px;
  background-image: url('../../images/trees1.png');
  position: absolute;
  /* begins past the right of the containing element */
  z-index: 2;
  -webkit-animation: trees1 30s linear infinite;
  -moz-animation: trees1 30s linear infinite;
}

Check this example in your browser

Leave a comment