VEG_Trade
@VEG_Trade
Flooring and ceilings

Почему анимация на сайте не работает должным образом?

Пытаюсь сделать анимацию на нашем сайте, но столкнулся с проблемой. Анимация должна быть плавной и запускаться при скролле страницы, однако она работает некорректно: дергается и тормозит. Может кто-то подсказать, что я делаю не так?

Мой код:

document.addEventListener('scroll', function() {
  const box = document.querySelector('.animated-box');
  const section = document.querySelector('.animated-section');
  const sectionTop = section.getBoundingClientRect().top;
  const sectionHeight = section.clientHeight;
  
  if (window.scrollY > sectionTop - window.innerHeight + sectionHeight / 2) {
    box.classList.add('scrolled');
  } else {
    box.classList.remove('scrolled');
  }
});

.animated-section {
  height: 200vh; 
  display: flex;
  justify-content: center;
  align-items: center;
}

.animated-box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  transform: translateY(100px);
  transition: transform 0.5s ease-out;
}

.animated-box.scrolled {
  transform: translateY(0);
}

<div class="animated-section">
  <div class="animated-box"></div>
</div>
  • Вопрос задан
  • 104 просмотра
Пригласить эксперта
Ваш ответ на вопрос

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

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