Skip to content

Instantly share code, notes, and snippets.

@honsa

honsa/index.html

Created April 6, 2021 20:31
Show Gist options
  • Save honsa/6408582cf9317d9fdb4ab72ea09892bc to your computer and use it in GitHub Desktop.
Save honsa/6408582cf9317d9fdb4ab72ea09892bc to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. honsa created this gist Apr 6, 2021.
    9 changes: 9 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    <div id="sky">
    <div id="sea">
    <div id="gb"></div>
    </div>
    </div>

    <audio id="song" autoplay>
    <source src="http://scummbar.com/mi2/MI1-CD/26%20-%20Monkey%20Island%20-%20Rock%20Remix%202.mp3">
    </audio>
    8 changes: 8 additions & 0 deletions monkey-island-css-animation-without-js.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    Monkey Island CSS Animation (without JS)
    ----------------------------------------
    Guybrush ThreepWood (Monkey Island) with CSS animations, using CSS3 steps() and audio HTML5.


    A [Pen](https://codepen.io/manz/pen/wBZvoE) by [Manz](https://codepen.io/manz) on [CodePen](https://codepen.io).

    [License](https://codepen.io/manz/pen/wBZvoE/license).
    39 changes: 39 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,39 @@
    body {
    margin:0;
    background:#000;
    }

    #sky {
    background:url(https://cdn.rawgit.com/ManzDev/cursos-assets/gh-pages/css3/monkey-sky.png) repeat-X;
    animation: movebg 9s linear infinite;
    }

    #sea {
    background:url(https://cdn.rawgit.com/ManzDev/cursos-assets/gh-pages/css3/monkey-sea.png) repeat-x;
    box-shadow:10px 10px 45px RGBA(0,0,0, 0.95) inset;
    animation: movebg 7s linear infinite;
    position:relative;
    top:145px;
    }

    @keyframes movebg {
    0% { background-position:550px }
    100% { background-position:0 }
    }

    #gb {
    width:104px;
    height:150px;
    background:url(https://cdn.rawgit.com/ManzDev/cursos-assets/gh-pages/css3/monkey-guybrush.png) no-repeat;
    animation:gbwalk 1s steps(6) infinite;
    margin:auto;
    position:relative;
    bottom:34px;
    /* Ojo, muy costoso en rendimiento */
    /* filter:drop-shadow(5px 5px 5px #000); */
    }

    @keyframes gbwalk {
    0% { background-position:0 }
    100% { background-position:-624px }
    }