JSFiddle - React, Tailwind, and code Playground

by Reigel Gallarde

HTML

<script src="http://spritely.net/lib/jquery/1.3.2/plugins/jquery.spritely-0.2.1.js"></script>
<div id="cobblestones">&nbsp;</div>
<div id="dogwalk">&nbsp;</div>

<div id="bike"></div>

CSS

div#dogwalk {
    background-image: url(http://www.freybug.com/images/dogwalker.png);
    height: 141px;
    width: 230px;
    position: absolute;
    z-index: 10000;
}
div#cobblestones {
    background-image: url(http://www.freybug.com/images/cobblestones.png);
    position: absolute;
    width: 100%;
    height: 43px;
    top:120px;
    left:0;
    z-index: 1;
}
#bike {
    background-image: url(http://chicabee.com/nav/RideSequence.png);
    cursor: pointer;
    height: 112px;
    position: relative;
    width: 116px;
    left: 400px;
    top: 20px;
    z-index: 3;
}

JavaScript

var $dogwalk = $('#dogwalk');
var $cobblestones = $('#cobblestones');
var $bike = $('#bike');
$cobblestones.pan({
    fps: 30,
    speed: 2,
    dir: 'left',
    depth: 10
});

$dogwalk.sprite({
    fps: 9,
    no_of_frames: 8
});

$bike.sprite({
    fps: 9,
    no_of_frames: 9
}).spRandom({
    top: 20,
    left: 310,
    right: 50,
    bottom: 440,
    speed: 3500,
    pause: 5000
});