css 扩展动画 - 使用animate.css。提供数据属性以在页面上的任何元素中添加动画。触发sc上的动画

Posted 2021-05-13

/**
 * Extended Animations
 * By: Zeshan Ahmed
 * URI: http://www.zeshanahmed.com/
 *
 * Extended animations trigger on scroll. Utilizes animate.css
 * use following data attributes in your sections
 * data-animation - e.g., fadeInLeft, this attribute is important for animations
 * data-animation-wait - accepts value in miliseconds, e.g., 5000
 * 
 * To trigger all animations in one section at once, add 
 * 'trigger-all-child-animations' class to the parent section of the
 * animations. 
 */
jQuery(document).ready(function($) {

  var $win = $(window),
      $sections = $('[data-animation]'),
      $triggerAllChild = $('.trigger-all-child-animations');

  $sections.addClass('not-animated');

  function extendedAnimations( $el ) {
    var $winThis = $(window);

    $el.each(function( i ) {

      var $this = $(this),
          type = $this.data('animation'),
          // speed = $this.data('animation-speed'), // not in use atm
          wait = $this.data('animation-wait'),
          hOffset = $this.offset().top - ( $winThis.height() * 0.75 );

      if ( speed ) {
        $this.addClass( 'animation-speed-' + speed );
      }

      if ( $winThis.scrollTop() > hOffset ) {

        if ( ! $this.closest( $triggerAllChild ).length ) {
          triggerExtendedAnimations( $this, wait, type );
        }

      }

    });
  }

  function triggerExtendedAnimations( $el, wait, type ) {

    if ( $el.hasClass( 'not-animated' ) ) {
      if ( wait ) {
        setTimeout( function() {
          $el.addClass( 'animated ' + type );
          $el.removeClass( 'not-animated' );
        }, wait);
      } else {
        $el.addClass( 'animated ' + type );
        $el.removeClass( 'not-animated' );
      }
    }

  }

  // Trigger all animations in one section at once. 
  function triggerAllInSection( $el ) {


    var $winThis = $(window);

    $el.each(function( i ) {

      var $this = $(this),
          $els = $this.find('[data-animation]'),
          hOffset = $this.offset().top - ( $winThis.height() * 0.75 );

      if ( $winThis.scrollTop() > hOffset ) {

        $els.each(function() {
          var $this = $(this),
              type = $this.data('animation'),
              wait = $this.data('animation-wait');

          triggerExtendedAnimations( $this, wait, type );
        });

      }

    });


  }

  $win.ready(function() {
    extendedAnimations( $sections );
    triggerAllInSection( $triggerAllChild );
  }).scroll(function() {
    extendedAnimations( $sections );
    triggerAllInSection( $triggerAllChild );
  });

});

/**
 * Extended Sections Animations
 * By: Zeshan Ahmed
 * URI: http://www.zeshanahmed.com/
 *
 * Extended animations trigger on scroll. Uses animate.css.
 */

.not-animated {
	opacity: 0;
}
.not-animated.animated {
	opacity: 1;
}