Question

我在我的网站上使用Animate.css，但它显示内容太晚了。

我想知道如何调整滚动时动画显示的速度。

我找到了一些关于滚动功能的javascript代码。

(function($){
$.fn.edsViewportChecker = function(useroptions){

    var options = {
        classToRemove: 'eds-scroll-hidden',
        classToAdd: 'eds-scroll-visible',
        offset: 75,
        callbackFunction: function(elem){}
    };
    $.extend(options, useroptions);

    var $elem = this;            

    this.checkElements = function(){

        var windowHeight = $(window).height(),
        viewportTop = $(document).scrollTop(),
        viewportBottom = (viewportTop + windowHeight);

        $elem.each(function(){
            var $obj = $(this);
            var scroll_offset = $obj.attr('eds_scroll_offset');

            if ($obj.hasClass(options.classToAdd)){
                return;
            }

            var elemTop = '';
            if(scroll_offset != null && scroll_offset != ''){
                elemTop = Math.round( $obj.offset().top ) + Math.round(Number(scroll_offset) * $obj.height() * 0.01),
                    elemBottom = elemTop + ($obj.height());
            }else{
                elemTop = Math.round( $obj.offset().top ) + Math.round(options.offset * $obj.height() * 0.01),
                elemBottom = elemTop + ($obj.height());
            }

            // Add class if in viewport
            if ((elemTop < viewportBottom) && (elemBottom > viewportTop)){
                $obj.addClass(options.classToAdd);
                $obj.removeClass(options.classToRemove);
                setTimeout(function(){
                    $obj.css('overflow', 'hidden');
                }, 250);
                options.callbackFunction($obj);
            }
        });
    };

    $( window ).on( "scroll", $.throttle( 250, this.checkElements ) );
    //For applying the onscroll part only after the user scroll atleast ones event after the item is in view port, just comment this out        
    this.checkElements();

}; })(jQuery);

我应该修复哪个部分？

Answer 1

250函数中的setTimeout应指定延迟的毫秒数，直到DOM元素的overflow属性设置为hidden（我相信会触发动画））。

此外，您可以将offset: 75更改为更小的内容，以便在滚动时更快地启动动画。

编辑：使用Jonathan Tan的答案比编辑JS文件更安全（在查看github之后，我甚至不知道你在哪里找到它）。只需记住更改-vendor-中-vendor-animation-duration: 3s;的覆盖率即可。例如：

-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;

Answer 2

  -vendor-animation-duration: 3s;

如github页面https://github.com/daneden/animate.css

中所示

更改持续时间，持续时间越长越慢。

-vendor-animation-duration: 3s; 我的意思是更改3s，如果你希望它更慢，设置它会超过3，另一方面如果你希望它更快，设置它会小于3。

如何在滚动时调整Animate.css的速度

2 个答案: