Monkey Island CSS Animation (without JS)

index.html

<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>

monkey-island-css-animation-without-js.markdown

Monkey Island CSS Animation (without JS)

Guybrush ThreepWood (Monkey Island) with CSS animations, using CSS3 steps() and audio HTML5.

A Pen by Manz on CodePen.

License.

style.css

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 }
}