Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save shahidkarimi/b444b08d4b30d2726e17 to your computer and use it in GitHub Desktop.
Save shahidkarimi/b444b08d4b30d2726e17 to your computer and use it in GitHub Desktop.
Parallax Scroller
<div id="back">
</div>
<div id="middle">
</div>
<div id="front">
</div>

Parallax Scroller

Testing some parallax scrolling with css animations. Images from wikipedia

A Pen by Rajanand on CodePen.

License.

@-webkit-keyframes scroll {
from {
left: 0px;
}
50% {
left: -320px;
}
to {
left: -640px;
}
}
div {
position: fixed;
top: 0;
bottom: 0;
right: 0;
background-repeat: repeat-x;
}
div#back {
-webkit-animation: scroll 30s infinite linear;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/9/9f/Sky_back_layer.png);
}
div#middle {
-webkit-animation: scroll 15s infinite linear;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/8/8b/Vegetation_%28middle_layer%29.png);
}
div#front {
-webkit-animation: scroll 7s infinite linear;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/be/Ground_%28front_layer%29.png);
}
body {
background: #BC9447;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment