JSFiddle - React, Tailwind, and code Playground

by jonathon

HTML

<script src="http://spritely.net/releases/0.6/jquery.spritely-0.6.js"></script>
<h1>Click any of the images!</h1>
<div id="o2" data-num="33"></div>
<div id="o3" data-num="14"></div>
<div id="g4" data-num="54"></div>
<div id="l5" data-num="65"></div>
<div id="e6" data-num="52"></div>
<div id="le" data-num="60"></div>

CSS

div{ float: left; border: 1px solid #000}

#o2{
    background: url(http://www.google.co.uk/logos/2011/henson11-hp-2oa.png);
    width:113px;
    height: 180px;
}

#o3{
    background: url(http://www.google.co.uk/logos/2011/henson11-hp-3oa.png) 0 85px no-repeat;;
    width:70px;
    height: 180px;
}


#g4{
    background: url(http://www.google.co.uk/logos/2011/henson11-hp-4ga.png) 0 21px no-repeat;
    width:168px;
    height: 180px;
}

#l5{
    background: url(http://www.google.co.uk/logos/2011/henson11-hp-6ea-lr.png) 0 36px no-repeat;
    width:45px;
    height: 180px;
}

#e6{
    background: url(http://www.google.co.uk/logos/2011/henson11-hp-6ea-er.png) 0 136px no-repeat;
    width:96px;
    height: 180px;
}

#le{
    background: url(http://www.google.co.uk/logos/2011/henson11-hp-6ea.png) 0 0 no-repeat;
    width:202px;
    height: 193px;
}

JavaScript

$('div').click(function() {
    var $this = $(this);
    $this.sprite({
        fps: 9,
        no_of_frames: $this.data("num"),
        on_last_frame: function(obj) {
            obj.destroy();
        }
    });
});