Как изменить положение некоторого элемента асинхронного использования jquery

Question

У меня есть 6 элементов, и я хочу изменить положение этого элемента асинхронно в одной функции.Я хочу анимировать эти элементы при прокрутке вверх.Теперь я использую плагин pagepilling.js из прокрутки.Я хочу создать этот эффект https://youtu.be/G5kBcCCSUzA при прокрутке сверху.

<div class="domino-effect">
        <div class="domino-animate-1 domino-animate" 
             style="background-image:url(images/home_slide_1.png)">

        </div>
        <div class="domino-animate-2 domino-animate" 
             style="background-image:url(images/home_slide_1.png)">

        </div>
        <div class="domino-animate-3 domino-animate" 
             style="background-image:url(images/home_slide_1.png)">

        </div>
        <div class="domino-animate-4 domino-animate" 
             style="background-image:url(images/home_slide_1.png)">

        </div>
        <div class="domino-animate-5 domino-animate" 
             style="background-image:url(images/home_slide_1.png)">

        </div>
        <div class="domino-animate-6 domino-animate"                    
             style="background-image:url(images/home_slide_1.png)">

        </div>
    </div>

В первую секунду я хочу изменить положение первого элемента Во второй секунде.изменить второй элемент и т. д.

Пример моего кода js

var myyyyFnc = function(elem, fr=1){
    elem.css('top','-80px');
}
for(var fr = 1; fr<=6; fr++){
    setTimeout(myyyyFnc,1000,$(".domino-animate-"+fr));
}

Я использую обратные вызовы из асинхронного изменения?

Answer 1

Вы можете использовать CSS анимацию для достижения этой цели.

.domino-effect {
  display: flex;
}

.domino-animate {
  width: 100px;
  height: 200px;
  border: thin solid black;
  position: relative;
}

.domino-animate-1 {
  animation: animateTop 1s 1s ease infinite alternate;
}

.domino-animate-2 {
  animation: animateTop 1s 1.2s ease infinite alternate;
}

.domino-animate-3 {
  animation: animateTop 1s 1.4s ease infinite alternate;
}

.domino-animate-4 {
  animation: animateTop 1s 1.6s ease infinite alternate;
}

.domino-animate-5 {
  animation: animateTop 1s 1.8s ease infinite alternate;
}

.domino-animate-6 {
  animation: animateTop 1s 2s ease infinite alternate;
}

@keyframes animateTop {
  from {
    top: 0;
  }
  to {
    top: -80px;
  }
}

<div class="domino-effect">
  <div class="domino-animate-1 domino-animate" style="background-image:url(https://via.placeholder.com/100x200)">

  </div>
  <div class="domino-animate-2 domino-animate" style="background-image:url(https://via.placeholder.com/100x200)">

  </div>
  <div class="domino-animate-3 domino-animate" style="background-image:url(https://via.placeholder.com/100x200)">

  </div>
  <div class="domino-animate-4 domino-animate" style="background-image:url(https://via.placeholder.com/100x200)">

  </div>
  <div class="domino-animate-5 domino-animate" style="background-image:url(https://via.placeholder.com/100x200)">

  </div>
  <div class="domino-animate-6 domino-animate" style="background-image:url(https://via.placeholder.com/100x200)">

  </div>
</div>