javascript - 滚动动画

Question

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

第一个问题:

我只需要在用户滚动到底部时运行动画。

---

第二个问题:

我滚动时有一个奇怪的动画，动画效果不佳如果您运行代码片段，您会注意到这一点。

这是我的代码

$(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;
            }
        });
    });
});

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;
}

<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>

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

Answer 1

这对我有用...在 firefox 中试过，现在运行良好...我使用了这些引用资料:

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

问题是滚动事件为一个滚动产生了很多事件，并且每个事件动画都开始了。为此，我将你的函数打包到另一个函数中，以便仅在停止滚动和动画开始后创建一个事件。 (您会注意到，来到网站甚至想看东西的普通人会停止滚动几秒钟，这是显示动画的时间，以满足您仅向下滚动的条件)。

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));
});

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;
}

<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>