Не работает скрипт с анимацией js

Question

У меня есть простенький сайт, на котором есть текст.

<body>
    <script src="js/script.js"></script>
            
    <div class="fullscreen">
            
        <div class="fullscreen_content">
            <h2 align="center" class="fullscreen_content_text _anim-items">Текст</h2>
        </div>>
            
    </div>
</body>

Тексту присвоен класс _anim-items

Также имеется стилевой файл для текста:

.fullscreen_content_text {
    color: white;
    font-family: "Gardens CM";
    transform: translate(0px, 120%);
    opacity: 0;
    transition: all 0.8s ease 0s;
}

.fullscreen_content_text._active {
    transform: translate(0px, 0px);
    opacity: 1;
}

То есть у текста два состояния: обычное, при котором он спрятан, и второе, которое должно активироваться при скролле (текст у меня виден сразу, поэтому состояние _active также должно появляться сразу при заходе на сайт).

Вот сам скрипт:

const animItems = document.querySelectorAll('._anim-items');

if (animItems.length > 0) {
    window.addEventListener('scroll', animOnScroll);
    function animOnScroll(params) {
        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 {
                animItem.classList.remove('_active');
            }
        }
    }
    function offset(el) {
        const rect = el.getBoundingClientRect(),
            scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
            scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
    }
    animOnScroll();
}

По классике жанра ничего не работает от слова совсем. В чём может быть проблема? P.S. код придумал не сам, подсмотрел в уроке: https://www.youtube.com/watch?v=kupwmF72Plo

Answer 1

Все у вас работает, просто скрипт нужно подключить в конце перед закрывающемся тегом body. Либо добавить в тег script аттрибут defer. Подключать скрипты лучше в конце либо в head с аттрибутом defer, браузер обработал ваш js код, но не успел обработать HTML. Поэтому js не может манипулировать HTML

БЛОГ НА HUSL

Не работает скрипт с анимацией js

Ответы (1 шт):