Различные анимационные эффекты в JS

Question

Я использую этот код эффекта анимации с js scroll: https://github.com/daneden/animate.css

Мой код js включает класс в последней строке:

$(this).addClass('fadeInLeft');

Это здорово, но иногдаЯ хотел бы изменить эффект fadeInLeft (например, slideInleft или flipInLeft).Как добавить другой эффект в этой строке в другом div?

Это мой код js:

$(document).ready(function() {
  // Check if element is scrolled into view
  function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
  }
  // If element is scrolled into view, fade it in
  $(window).scroll(function() {
    $('.scroll-animations .animated').each(function() {
      if (isScrolledIntoView(this) === true) {
        $(this).addClass('fadeInLeft');
      }
    });
  });
});

Answer 1

Вы можете указать тип анимации в пользовательском атрибуте вашего элемента.

$(window).scroll(function() {
  $('.scroll-animations .animated').each(function() {
    if (isScrolledIntoView(this) === true) {
      $(this).addClass($(this).data("animationType"));
    }
  });
});

<div class="scroll-animations">
  <div class="animated" data-animation-type="fadeInLeft"></div>
  <div class="animated" data-animation-type="flipInLeft"></div>
</div>