滚动动画

Question

Hello 我在滚动上创建简单动画，这个动画依赖于animate.css库但有两个问题。

第一个问题：

我需要在用户滚动到底部的情况下运行动画。

<小时/>

第二个问题：

这就是我滚动时有一个奇怪的动画，动画效果不好你可以注意这个，如果你运行代码片段。

这里是我的代码

＆＃13;

＆＃13;

$(function () {
    var $animation_elements = $('.myDiv');

    $(window).on('scroll resize', function () {
        var viewportHeight = $(window).height();

        $animation_elements.each(function () {
            var $el = $(this);
            var position = this.getBoundingClientRect(); // This Function Will Return With object Contains top left Width Height
            if (position.top > viewportHeight || position.bottom < 0) {
                this.inView && $el.removeClass('animated bounceIn');
                this.inView = false;
            } else {
                !this.inView && $el.addClass('animated bounceIn');
                this.inView = true;
            }
        });
    });
});

＆＃13;

body{
    height:4000px;
    margin-top:800px;
}
.myContainer{
    width:1000px;
    margin:50px auto;
}
.myContainer .myDiv {
    width: 400px;
    height: 200px;
    margin: auto;
    background-color: #00e675;
    -moz-animation-duration: 5s !important;
    -o-animation-duration: 5s !important;
    -webkit-animation-duration: 5s !important;
    animation-duration: 5s !important;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="myContainer">
      <div class="myDiv">
      </div>
  </div>

＆＃13;

＆＃13;

＆＃13;

注意：请在整页中运行代码段。

Answer 1

这对我有用...在firefox中尝试过，现在效果很好......我使用了这些引用：

1. Detect user scroll down or scroll up in jQuery
2. jQuery scroll() detect when user stops scrolling

问题在于滚动事件为一个滚动产生了很多事件并且每个事件动画都开始了。为此，我将你的函数打包到另一个函数，只有在停止滚动之后才能创建一个事件，然后动画将开始。 （你可以注意到那些来到网站甚至想要看到某些内容的普通人会停下来滚动几秒钟，这是显示动画的时间，以便完成你只有向下滚动的条件。）< / p>

＆＃13;
＆＃13;
switching = 0

var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
// detect when scroll down and catch it
$('html').bind(mousewheelevt, function(e){

    var evt = window.event || e //equalize event object     
    evt = evt.originalEvent ? evt.originalEvent : evt; //convert to originalEvent if possible               
    var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta //check for detail first, because it is used by Opera and FF

    if(delta > 0) {
        //scroll up
        switching = 0;
    }
    else{
        switching = 1;
        //scroll down
    }   
});

//create event only after scroll stop
$(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
        // do your animation
        $(function () {
    var $animation_elements = $('.myDiv');

    $(window).on('scroll resize', function () {
    //console.log(switching);
    if (switching){
        var viewportHeight = $(window).height();

        $animation_elements.each(function () {
            var $el = $(this);
            var position = this.getBoundingClientRect(); // This Function Will Return With object Contains top left Width Height
            if (position.top > viewportHeight || position.bottom < 0) {
                this.inView && $el.removeClass('animated bounceIn');
                this.inView = false;
            } else {
                !this.inView && $el.addClass('animated bounceIn');
                this.inView = true;
            }
        });
	}
    });
});

       // console.log("Haven't scrolled in 250ms!");
      // console.log(switching);
    }, 250));
});
＆＃13;
body{
    height:4000px;
    margin-top:800px;
}
.myContainer{
    width:1000px;
    margin:50px auto;
}
.myContainer .myDiv {
    width: 400px;
    height: 200px;
    margin: auto;
    background-color: #00e675;
    -moz-animation-duration: 5s !important;
    -o-animation-duration: 5s !important;
    -webkit-animation-duration: 5s !important;
    animation-duration: 5s !important;
}
＆＃13;
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="myContainer">
      <div class="myDiv" >
      </div>
  </div>
 </body>
＆＃13;
＆＃13;
＆＃13;