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

Я использую этот код эффекта анимации с 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');
      }
    });
  });
});
0
0
65
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Это круто. Большое спасибо.

Pityer 26.10.2018 09:04

Другие вопросы по теме