Как запустить анимацию CSS @keyframe при прокрутке с помощью Jquery?

Question

1. Во-первых, у меня небольшие проблемы с анимацией этих box элементов при прокрутке с использованием jquery. Я хочу, чтобы мой animation запускался, когда я прокручивал 1/4 из section.
   2. Во-вторых, мои box делители раньше были вертикально центрированы, но после добавления @keyframes во время перехода они больше не центрировались. Если вы удалите animation-fill-mode: forwards, вы увидите, как они возвращаются в конце перехода.
   3. И последний вопрос. Можно ли использовать jquery для анимации этих двух полей, когда я начинаю прокручивать без необходимости писать разные коды для каждого sections? Я думаю, что если я добавлю несколько общих классов в мои box div, которые должны работать, верно?

Первоначально в своем файле jquery я пытался установить класс hidden с opacity:0 на box div и когда я начал прокручивать, это изменилось бы на showing класс с opacity:1. ... но это пошло не так хорошо.

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

Как вы можете видеть, кода jquery нет, потому что после того, как мой мозг начал с ним связываться, произошел беспорядок, и однажды я решил, что должен начать все заново.

Здесь - ссылка на мой Codepen.

Jade

.landing-page
.section-one
  .box-one
.section-two
  .box-two

SASS

@mixin box()
  position: absolute
  width: 200px
  height: 200px
  background: black
.landing-page
  height: 100vh
  width: 100vw
  background: gray
.section-one
  position: relative
  height: 100vh
  width: 100vw
  background: lightblue
  .box-one
    @include box()
    top: 50%
    right: 10%
    transform: translate(-50%,-50%)
    animation-name: box-one-animation
    animation-duration: 2s
    animation-fill-mode: forwards
.section-two
  position: relative
  height: 100vh
  width: 100vw
  background: lightgreen
  .box-two
    @include box()
    top: 50%
    left: 10%
    transform: translate(-50%,-50%)
    animation-name: box-two-animation
    animation-duration: 2s
    animation-fill-mode: forwards

@keyframes box-one-animation
  0%
    transform: translateX(0)  
  100%
    transform: translateX(-50%)
@keyframes box-two-animation
  0%
    transform: translateX(0)  
  100%
    transform: translateX(50%)  

Answer 1

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

Вот слушатель события:

https://developer.mozilla.org/en-US/docs/Web/Events/scroll

var last_known_scroll_position = 0;
var ticking = false;

function doSomething(scroll_pos) {
  // do something with the scroll position
  console.log(scroll_pos);
  if(scroll_pos > 200){
    console.log(document.getElementsByClassName('box-one')[0].classList);
     document.getElementsByClassName('box-one')[0].classList.add('animate-me');
  }
}

window.addEventListener('scroll', function(e) {
  last_known_scroll_position = window.scrollY;
  if (!ticking) {
    window.requestAnimationFrame(function() {
      doSomething(last_known_scroll_position);
      ticking = false;
    });
    ticking = true;
  }
});

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

Ручка здесь: https://codepen.io/cidicles/pen/gzWwEz

---

Существует множество великолепных библиотек, которые делают анимацию такого типа для вас, например, Scroll Magic или Skrollr, но всегда интересно создавать свои собственные: p.

https://github.com/Prinzhorn/skrollr
http://scrollmagic.io/