JQuery Banner Animation

by Avinashullal

HTML

<div id="continious"></div>

CSS

#continious {
    width: 100%;
    height: 200px;
    background-image: url(http://wowslider.com/sliders/demo-10/data/images/dock.jpg);
    background-position: 0px 0px;
    background-size:cover;
}

JavaScript

(function ($) {

    var x = 0;
    var y = 0;
    //
    var banner = $("#continious");

    // set initial banner background position
    banner.css('backgroundPosition', '' + x + '%' + ' ' + y + 'px');

    // scroll up background position every 90 milliseconds
    setInterval(function () {
        banner.css("backgroundPosition", x + 'px' + ' ' + y + 'px');
        y--;

        //x--; if you need to scroll image horizontally - uncomment x and comment y
    }, 30);

})(jQuery);