Skip to content

Instantly share code, notes, and snippets.

@shahidkarimi

shahidkarimi/Parallax Scroller.markdown

Forked from anonymous/Parallax Scroller.markdown
Created February 3, 2016 12:36
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save shahidkarimi/b444b08d4b30d2726e17 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save shahidkarimi/b444b08d4b30d2726e17 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Feb 3, 2016.
    7 changes: 7 additions & 0 deletions Parallax Scroller.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Parallax Scroller
    -----------------
    Testing some parallax scrolling with css animations. Images from wikipedia

    A [Pen](http://codepen.io/Rajanand/pen/dKsAb) by [Rajanand](http://codepen.io/Rajanand) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/Rajanand/pen/dKsAb/license).
    6 changes: 6 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@
    <div id="back">
    </div>
    <div id="middle">
    </div>
    <div id="front">
    </div>
    38 changes: 38 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,38 @@
    @-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;
    }