JSFiddle - React, Tailwind, and code Playground

by safarov

HTML

<script src="http://koodoocreative.co.uk/~stagesca/wp-content/themes/scanman/assets/js/jquery.spritely-0.6.1.js"></script>
<div id="stage" class="stage">
                    <div id="clouds" class="stage"></div>
                    <div id="helicopter" class="stage"></div>
                    <div id="bg2" class="stage"></div>    
            </div>

CSS

#stage {
    z-index: 999;
}

.stage {
    position: absolute;
    width: 100%;
    min-width: 500px;
    height: 235px;
    overflow: hidden;
}

#clouds {
    background: url(http://koodoocreative.co.uk/~stagesca/wp-content/themes/scanman/assets/img/animations/clouds.jpg) repeat-x 0 -30px;
    position: absolute;
}

#helicopter {
    background: url(http://koodoocreative.co.uk/~stagesca/wp-content/themes/scanman/assets/img/animations/contact_helicopter.png) no-repeat;
    left: 90%;
    position:absolute;
}

#bg1 {
    background: url(http://koodoocreative.co.uk/~stagesca/wp-content/themes/scanman/assets/img/animations/bg1.png) repeat-x;
    position: absolute;
    top: 110px;
}

JavaScript

/* Helicopter Movement */
    $('#helicopter').pan({fps: 30, speed: 3, dir: 'right', depth: 70});
    
    /* Top Animation */
    $('#clouds').pan({fps: 30, speed: 2, dir: 'right', depth:30});
    $('#bg1').pan({fps: 30, speed: 1, dir: 'right', depth:25});