简体   繁体   中英

How could I progress the sprite animation on scroll?

I am newbie. I can't sprite animation using jquery.. What's the problem? How can make progressing the sprite animation on the spot loop as scroll??

$(window).scroll('scroll',function(e){
    parallaxScroll();
});

function parallaxScroll() {
    var ani_data = [0, -120, -240, -480];
    var frame_index = 0;

    if ( ScrollCount == 3 ) {
        ScrollCount = 1;
        $('#fatherwalk').css('background-position', ani_data[frame_index] + 'px 0px');
        frame_index++;

        if ( frame_index >= ani_data.length ) {
            frame_index = 0;
        }   
    }

    scrollcount++;
}

Why you don't get a shortcut and try SpinJS? http://fgnass.github.io/spin.js/

It's so easy to implement and works fine. Here is a Sample that I've made on JSFiddle Below a quick implementation of the JS:

$.fn.spin = function (opts) {
    this.each(function () {
        var $this = $(this),
            spinner = $this.data('spinner');

        if (spinner) spinner.stop();
        if (opts !== false) {
            opts = $.extend({
                color: $this.css('color')
            }, opts);
            spinner = new Spinner(opts).spin(this);
            $this.data('spinner', spinner);
        }
    });
    return this;
};

$(function () {
    $(".spinner-link").click(function (e) {
        e.preventDefault();
        $(this).hide();
        var opts = {
            lines: 12, // The number of lines to draw
            length: 7, // The length of each line
            width: 5, // The line thickness
            radius: 10, // The radius of the inner circle
            color: '#fff', // #rbg or #rrggbb
            speed: 1, // Rounds per second
            trail: 66, // Afterglow percentage
            shadow: true // Whether to render a shadow
        };
        $("#spin").show().spin(opts);
    });
});

Hope this helps.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM