@rrommka-web

Сделать анимацию текста при скролле по странице?

Очень понравилась анимация текста при скролле страницы ( surl.li/iliw ) - кто может подсказать как это можно реализовать .
Еще было бы интересно узнать какой эффект на видео при скролле.?
  • Вопрос задан
  • 93 просмотра
Пригласить эксперта
Ответы на вопрос 3
bestowhope
@bestowhope
Печатает...
1 в 1 не подскажу. Явно делали ручками.
Покури это. Для текста самое то. А бг уж думаю вкуришь как заглитчить

Пример | Сорс
Больше всего подходит А6
Ответ написан
const animItems = document.querySelectorAll(`._anim-items`)
if (animItems.length > 0) {
    window.addEventListener(`scroll`, animOnScroll)

    function animOnScroll() {
        for (let index = 0; index < animItems.length; index++) {
            const animItem = animItems[index]
            const animItemHeight = animItem.offsetHeight
            const animItemOffSet = offset(animItem).top
            const animStart = 4
            let animItemPoint = window.innerHeight - animItemHeight / animStart
            if (animItemHeight > window.innerHeight) {
                animItemPoint = window.innerHeight - window.innerHeight / animStart
            }
            if ((pageYOffset > animItemOffSet - animItemPoint) && pageYOffset < (animItemOffSet + animItemHeight)) {
                animItem.classList.add(`_active`)
            } else {
                if (!(animItem.classList.contains(`_anim-no-hide`))) {
                    animItem.classList.remove(`_active`)
                }
            }
        }
    }

    function offset(el) {
        const rect = el.getBoundingClientRect()
        let scrollLeft = window.pageXOffset || document.documentElement.scrollLeft
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop
        return {top: rect.top + scrollTop, left: rect.left + scrollLeft}
    }

    setTimeout(() => {
        animOnScroll()
    }, 300)
}


для срабатывания анимации добавляешь класс _anim-items ( + _anim-no-hide если не нужна анимция при повторной прокрутке) , a в css добавляешь саму анимацию
.header {
  transform: translate(0, -80%);
  opacity: 0.5;
  transition: all 1s ease 0s;
}
.header._active {
  transform: translate(0, 0);
  opacity: 1;
}


Пример можно посмотреть здесь: https://github.com/GleckoS/Studio-Urody-An-In
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы