Как реализовать анимацию привязанную к скроллу вверх и вниз?

Question

[Yana]

Как реализовать похожую анимацию как на сайте https://gusto.com/wallet ? (блок, где из экрана смартофана выходят элементы и привязаны к скроллу и вверх и вниз - анимация только на десктоп версии есть).
важно: без использования библиотек, только js и css.

Может есть примеры или подскажете примерные шаги реализации?
нагуглить, найти примеры на codepen и тд не удалось(

Answer 1

[strelok011]

Можно посмотреть сюда

Comments

[Yana]

забыла добавить в описание, реализация без сторонних библиотек, только js и css

[strelok011]

Тогда можем ловить событие scrollTop, вначале ставим 0, потом изменяем значение. Определяем дельту, связываем с произвольной анимацией.

var lastScrollTop = 0;

// element should be replaced with the actual target element on which you have applied scroll, use window in case of no target element.
element.addEventListener("scroll", function(){ // or window.addEventListener("scroll"....
   var st = window.pageYOffset || document.documentElement.scrollTop; 
   if (st > lastScrollTop){
      // downscroll code
   } else {
      // upscroll code
   }
   lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);