Skrollr.js在向上滾動時開始另一個動畫

Question

我正在使用Skrollr.js。當從上到下滾動時，我有這個動畫：

<div 
    class="flight-icon-d __d" 
    data-anchor-target=".section.__flight" 
    data-top-top="top: 126px; transform: translateX(-50%) rotate(-135deg) scale(0.35);" 
    data--50-top="transform: translateX(-50%) rotate(0deg) scale(0.35);" 
    data--150-top="top: 425px; transform: translateX(-50%) rotate(0deg) scale(1);" 
    data--550-top="top: 745px; transform: translateX(-50%) rotate(0deg) scale(1);" 
    data--780-top="top: 980px; transform: translateX(-50%) rotate(0deg) scale(0.35);"></div> 

所以，當我向上滾動我的動畫後退。如何在滾動時更改動畫？

Answer 1

你可以在animate.css下面使用js。

JS

/* Check Which Section Visible on screen*/ 
    $(document).ready(function() { 
     var $animation_elements = $('.animate-box'); 
     var $window = $(window);  
     function check_if_in_view() { 
      var window_height = $window.height(); 
      var window_top_position = $window.scrollTop(); 
      var window_bottom_position = (window_top_position + window_height); 

      $.each($animation_elements, function() { 
       var $element = $(this); 
       var element_height = $element.outerHeight(); 
       var element_top_position = $element.offset().top; 
       var element_bottom_position = (element_top_position + element_height); 

       //check to see if this current container is within viewport 
       if ((element_bottom_position > window_top_position) && 
        (element_top_position < window_bottom_position)) { 
        $element.addClass('in-view');     
        var cls = ".in-view .animated"; 
        $(cls).each(function() { 
         var animationName = $(this).attr("animate");      
         if (animationName !== undefined) { 
          /* Chrome & Safari */ 
          $(this).css('-webkit-animation-duration', $(this).attr("duration")); 
          /*Mozila*/ 
          $(this).css('-moz-animation-duration', $(this).attr("duration")); 
          /*Opera*/ 
          $(this).css('-o-animation-duration', $(this).attr("duration")); 
          /* Chrome & Safari */ 
          $(this).css('-webkit-animation-delay', $(this).attr("delay")); 
          /*Mozila*/ 
          $(this).css('-moz-animation-delay', $(this).attr("delay")); 
          /*Opera*/ 
          $(this).css('-o-animation-delay', $(this).attr("delay")); 
          var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; 
          $(this).addClass(animationName).one(animationEnd, function() { 
           $(this).removeClass('animated ' + animationName) 
          }); 
         } 
        }); 
       } else { 
        $element.removeClass('in-view'); 
       } 
      }); 
     } 
     $window.on('scroll resize', check_if_in_view); 
     $window.trigger('scroll'); 
    }); 

HTML代碼：

<section id="section2" class="bg bg-2 animate-box">     
       <div class="box animated" animate="fadeIn" duration="2s" delay="1s" > ... </div> 
</section> 

DEMO URL

http://plugins.auratechmind.net/scrolltoanimate