Henry V

HAML
.stage <img class="infantry" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/165418/polearms.png"> <img class="archers" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/165418/archers.png"> <img class="arrows" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/165418/arrowsRelease.gif"> <img class="arrowsSM" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/165418/arrowsSmall.gif"> <img class="arrowsLG" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/165418/arrowsLG.png"> <img class="title" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/165418/henry.gif">
SCSS
/* Compass library */ @import "compass"; body { background: #fbfbfb; } .stage { background: #c48e3f; width: 600px; height: 800px; margin: 20px auto; position: relative; overflow: hidden; } .infantry, .archers, .arrows, .arrowsSM, .arrowsLG, .title { position: absolute; } .infantry { z-index: 1; @include translate3d(0,500px,0); animation: infantry 2.25s forwards; } .archers { z-index: 3; @include translate3d(0,565px,0); animation: archers 2s 1.25s forwards; } .arrows { z-index: 2; @include translate3d(-1000px,800px,0); animation: arrows .75s 2.5s forwards; } .arrowsSM { z-index: 4; @include translate3d(0,-1290px,0); animation: arrowsSM .75s 3.5s forwards; } .arrowsLG { z-index: 5; @include translate3d(0,-1620px,0); animation: arrowsLG .5s 3.75s forwards; } .title { z-index: 5; animation: title 1.75s 4s forwards; opacity: 0; } /* Lets start some animation */ @keyframes infantry { 50% {@include translate3d(0,0,0);} 99% {@include translate3d(0,0,0);} } @keyframes archers { 50% {@include translate3d(0,0,0);} 75% {@include translate3d(0,0,0);} } @keyframes arrows { to {@include translate3d(230px,-390px,0);} } @keyframes arrowsSM { to {@include translate3d(0,800px,0);} } @keyframes arrowsLG { to {@include translate3d(0,0,0);} } @keyframes title { to {opacity: 1;} }
JAVASCRIPT
//No JS...sorry.
Expand for more options Login