Как сделать перемещения обьекта при скролле?

Question

[ololoshka1]

Есть пример сайта tabula.bold-themes.com/wavy, можно увидеть, что при скролле в низ некоторые обьекты движутся transform: translateY(-27.3406px); ,если скролить в верх, обратно в + translate .Как такое сделать?)

Answer 1

[WapSter]

Грубый пример

Comments

[ololoshka1]

а как ограничить, что б максимум 20px translate был

[WapSter]

ololoshka1, обновил код

[ololoshka1]

WapSter, благодарю)

[ololoshka1]

WapSter такой еще вопрос, заметил что при скролле где-то на 100px вниз, обьект движется вверх где-то на 7-10px.Тоисть не сразу на 20px,выходит при скролле в ~300px он постепенно уходит в минус.Такое сложно сделать?

[WapSter]

ololoshka1, нужно подобрать верный алгоритм движения в моем примере это высотаСкролла + высотаСкролла * коэфициент равный 0.1, но он дерганый немного. Подумай над своим может сделаешь лучше) И еще событие скролл само по себе не очень, c intersectionobserver можно добиться более плавного поведения

[ololoshka1]

WapSter, окей, буду разбиратся)

[ololoshka1]

WapSter можешь помочь?при скроле работает только один элемент, а если их больше 1-ого с одинаковым классом, то цепляет только первый.А мне нужно все элементы

[WapSter]

ololoshka1, ой нет. Это же основы работы с селекторами и работы с циклами. Как нибудь сам

[ololoshka1]

WapSter, я только учусь, цикли и селектора знаю и как применить ко всем дивам, я понимаю, но чужой код не читаю пока что.ну ок

[ololoshka1]

WapSter, а все понял, забей)

const el = document.querySelectorAll('.timeline ul li .image')
  window.addEventListener('scroll', e => {
    let offsetY = window.pageYOffset + window.pageYOffset * 0.1
    if (offsetY >= 20) {
      offsetY = (randomInteger(20, 80) );
    }
    for (let index = 0; index < el.length; index++) {
      el[index].style.transform = `translateY(${offsetY}px)`
    }
   
  });