滚动动画

Question

Hello I work on create simple animation on scroll, this animation depend on animate.css Library but there are two problems.

First Problem:

That I need to run the animation on user scroll to bottom only.

---

Second Problem:

That is there are a strange animation on I scroll, The animation is not work well you can note this if you run the code snippet.

Here my code

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

Note: Please run code snippet in full page.

Answer 1

This worked for me... tried in firefox and now work well... I used these references:

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

The problem was that scroll event produced for one scroll a lot of events and for every event animation started. For that I packed your function to another function to create an event only after stopping scrolling and after that animation will start. (you can notice that normal person that come to site and want even see something will stop to scroll for a few seconds, that's the time to show up your animation in order to fulfilling your condition about scrolling down only).

 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>