Complete CSS3 + HTML5 music video

Complete CSS3 + HTML5 music video.markdown

Complete CSS3 + HTML5 music video ('-' * 33) Full how-to at 24ways.org: http://24ways.org/2012/flashless-animation/

You probably have seen me working on the different parts of this: The walk cycle, the running animation, the music looping, the parallax. Here it comes all together.

Music is "The Girl in Byakkoya" by Susumu Hirasawa.

A Pen by Rachel Nabors on CodePen.

License.

index.html

<div class="loading">
  <p id="play-me">While loading, please adjust your volume.</p>
</div>

<div class="foreground"></div>

<div class="midground">
  <div class="tuna"></div>
</div>

<div class="background">
</div>

<audio id="audio" preload="auto">
  <source src="http://stash.rachelnabors.com/24ways2012/byakkoya_ep.mp3" type="audio/mp3" />
  <source src="http://stash.rachelnabors.com/24ways2012/byakkoya_ep.ogg" type="audio/ogg" />
</audio>

script.js

// Play and loop music

// Get the audio element
var byakkoya = document.querySelector('audio');

// create function to play and loop audio
function song(a){
    //start playing at 0
    a.currentTime = 0;
    a.play();

    //when we hit 64 seconds... 
    setTimeout(function(){
        // skip back to 24.5 seconds and keep playing...
        a.currentTime = 24.55;

        // then loop back when we hit 64 again, or every 59.5 seconds.
        setInterval(function(){
            a.currentTime = 24.55;
        },39450);
    },64000);
}

// Wait till the music loads (or get a nasty error!)
byakkoya.addEventListener("canplaythrough", function () {
  setTimeout(function(){ 
    // add a class to the body tag so we know we're playable...
    $("body").addClass("playable");
    $("#play-me").html("Play me.").click(function(){
      song(byakkoya);
      $("body").addClass("playing");
    });
  },3000); //a wee bit of a delay to make sure peeps see the PSA
}, false);

style.css

* {
  /* Nov 25, 2013: !important required to override selectors' implied state of running. */
  animation-play-state: paused !important;
}

.playing * {
  animation-play-state: running !important;
}

.tuna {
  animation: 
    walk-cycle 1s steps(12) 24,
    walk-to-run .75s steps(12) 24s 1, 
    run-cycle .5s steps(13) 24.75s infinite;
  background: url(http://stash.rachelnabors.com/24ways2012/cat_sprite.png) 0 0 no-repeat; 
  height: 200px;
  width: 400px;
  position: absolute;
  bottom: 1px;
  left: 50%;
  margin-left: -200px;
  translate3d(0,0,0);
}

@keyframes walk-cycle {  
  0% {background-position: 0 0; } 
  100% {background-position: 0 -2391px; } 
}

@keyframes walk-to-run {  
  0% {background-position: -400px 0; } 
  100% {background-position: -400px -2391px; } 
}

@keyframes run-cycle {  
  0% {background-position: -800px 0; }
  100% {background-position: -800px -2591px; } 
}

.foreground, .midground, .background {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0; left: 0;
  translate3d(0,0,0); 
}

.foreground {
  animation:
    parallax_fg 10s linear infinite,
    parallax_fg_fast 2s linear 24.75s infinite;
  background:  url(http://stash.rachelnabors.com/24ways2012/foreground_grass.png) 0 100% repeat-x;
  z-index: 3;
}

@keyframes parallax_fg { 
  0% { background-position: -3584px 100%;} 
  100% {background-position: 0 100%; } 
}

@keyframes parallax_fg_fast {  
  0% { background-position: 8870.4px 100%;} 
  100% {background-position: 12454.4px 100%; }
}

.midground {
  animation: 
    parallax_mg 20s linear infinite,
    parallax_mg_fast 5s linear 24.75s infinite;
  background:  url(http://stash.rachelnabors.com/24ways2012/midground_grass.png) 0 100% repeat-x;
  z-index: 2;
}

@keyframes parallax_mg {  
  0% { background-position: -3000px 100%;}
  100% {background-position: 0 100%; }
}
@keyframes parallax_mg_fast { 
  0% { background-position: 3712.5px 100%;}
  100% {background-position: 6712.5px 100%; } 
}

.background {
  background-image:
    url(http://stash.rachelnabors.com/24ways2012/background_mountain5.png),
    url(http://stash.rachelnabors.com/24ways2012/background_mountain4.png),
    url(http://stash.rachelnabors.com/24ways2012/background_mountain3.png),
    url(http://stash.rachelnabors.com/24ways2012/background_mountain2.png),
    url(http://stash.rachelnabors.com/24ways2012/background_mountain1.png);
  background-repeat: repeat-x;
  background-position: 0 100%;
  z-index: 1;
  animation: 
    parallax_bg 40s linear infinite,
    parallax_bg_fast 10s linear 24.75s infinite;
}

@keyframes parallax_bg {  
  0% { background-position: -2400px 100%, -2000px 100%, -1800px 100%, -1600px 100%, -1200px 100%;} 
  100% {background-position: 0 100%, 0 100%, 0 100%, 0 100%, 0 100%; } 
}
@keyframes parallax_bg_fast { 
  0% { background-position: 1485px 100%, 1237.5px 100%, 1113.75px 100%, 990px 100%, 742.5px 100%;} 
  100% {background-position: 3885px 100%, 3237.5px 100%, 2913.75px 100%, 2590px 100%, 1942.5px 100%; } 
}
body {
    background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%),
    #d2d2d2 url(http://stash.rachelnabors.com/24ways2012/background_clouds.png);
}