2 разные анимации в зависимости от направления прокрутки - PullRequest
Новая
       10

2 разные анимации в зависимости от направления прокрутки

0 голосов
/ 12 февраля 2019

Я создал анимацию, которая прокручивает фрагмент текста внутри div, и затем я подумал, что было бы интересно, если бы направление анимации (вверх или вниз) динамически изменялось в зависимости от направления прокрутки (если прокрутить вниз, фрагменттекста тоже прокручивается вниз, если вы прокрутите вверх, фрагмент текста изменит направление и тоже прокрутится вверх).Проблема в том, что я не знаю, как изменить CSS-код ключевого кадра с помощью jQuery .какие-нибудь решения? 

@keyframes spam {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 100%);
  }
}

и jQuery , чтобы получить направление: 

 $(window).bind('mousewheel', function(event) {
  if (event.originalEvent.wheelDelta >= 0) {
    // don't change anything
  } else {
    // change the keyframe 100% propriety from transform: translate(0, 100%) to transform: translate(0, -100%);
  }
});

Единственное решение, которое я вижу сейчас, - это продублировать текст, дать емудругая анимация, которая прокручивает текст и скрывает / показывает эти 2 разные текстовые анимации в зависимости от направления прокрутки.Извините за мой плохой английский.

1 Ответ

0 голосов
/ 12 февраля 2019

Динамическое изменение свойств CSS анимации ключевых кадров не очень хорошая идея, даже если это было теоретически легко, поскольку вы никогда не знаете, что еще в будущем может использовать тот же самый ключевой кадр не подозревающим.

Что вы должны сделать, это назначить анимацию классам CSS, например, 

.animate-spam {
    animation-name:spam;
    animation-duration:1s;
    animation-fill-mode: forwards;
}

для текущей анимации, а затем еще один ключевой кадр и класс для другого направления прокрутки.Тогда ваше решение так же просто, как добавление и удаление классов.

Поскольку вы упомянули, что используете jQuery, вы также можете просто использовать встроенную функцию .animate (), которая, вероятно, проще для простого приложения, подобного этому.

...