mJWqBg

index.html

<div id="robot"></div>

mJWqBg.markdown

Robot!

A Pen by Giovanni Carlo Marasco on CodePen.

License.

script.js

var $robot = $('#robot'),
  transEnd = 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
  left = 37,
  right = 39,
  a = 97,
  s = 115,

  stepSprite = function() {
    $robot.velocity({
      opacity: 0,
      backgroundPosition: '-1600px 0px'
    },{
      loop: 2,
      duration: 1000
    });
  };

$robot.on('click', function() {
  $(this).velocity({ marginLeft: '+=100px' },{ duration: 1000 });
});

$(document).on('keypress', function(ev) {

  var keyCode = ev.keyCode || ev.which;

  switch (keyCode) {
    case a:
      var src = $robot.css('background-image').split('(').pop().slice(0,-1),
          img = new Image().src = src;
      
      alert( img.width );
      break;

    case s:
//       alert('right');
      stepSprite();
      break;
  }
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>

style.css

@img_root: "http://charlos.co.uk/exp/";

#robot {
  width: 400px;
  height: 600px;
  background-image: url("@{img_root}robot_walk_sprite.png");
  background-position: 0px 0;
  /*transition: 0.5s;
  transition-timing-function: steps(4,end);
  &.walk {
    background-position: -1600px 0;
  }  */
}