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

Question

[alaskafx]

Есть такой сайт https://www.uprock.ru/promo/swisstypography
И хотелось бы узнать, как там реализовано это плавное появление элементов при скролле?

Answer 1

[Виталий Першин]

locomotive-scroll
ScrollMagic
scrolltrigger

Comments

[alaskafx]

Благодарю, а есть с локомотивом какой-то пример вместе со свойством opacity ?

[Виталий Першин]

alaskafx, Внизу есть пример как получить прогресс прокрутки, на основе этих данных можно делать любые эффекты https://github.com/locomotivemtl/locomotive-scroll...

Answer 2

[Noder SS]

Что-то типа такого?

<script>
    function onEntry(entry) { 
      entry.forEach(change => { 
        if (change.isIntersecting) { 
         change.target.classList.add('element-show'); 
         
        } 
      }); 
    } 
        let options = { 
      threshold: [0.5] }; 
    let observer = new IntersectionObserver(onEntry, options); 
    let elements = document.querySelectorAll('.element-animation'); 
     
    for (let elm of elements) { 
      observer.observe(elm); 
    }
</script>

.element-animation{ 
    top: 0px; 
    opacity: 0; 
    position: relative; 
} 
.element-animation.element-show{ 
position: relative; 
top: -20px; 
opacity: 1; 
transition-duration: 1.4s; 
}

Елементам с появлением пропишите класс element-animation

Comments

[alaskafx]

Около того, но если взглянуть на то, что я привёл в виде примера, то там элементы приобретают opacity и translate по мере скролла.. То есть поэтапное появление, а не мгновенное срабатывание за счёт приобретения класса появления