Простая анимация с использованием Intersection Observer

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

В этой статье я собираюсь показать вам один из способов сделать это с помощью Intersection Observer API.

Я создал элемент div с именем класса «demo».

<div class="demo"><div>
 

.demo{
  width: 100vw;
  height: 200px;
  background: orange;
  top: 100vh;
  left: 0vw;
  position: relative;
} 

@keyframes left-right 
{
  0% {left: -90vw;}j
  100% {left: 0px;}

.left-right 
{
 animation-name: left-right;
 animation-duration: 2s;
 animation-iteration-count: 1;
}

// create observer
const observer = new IntersectionObserver(entries => {
  // Loop over the entries(even if we only asks one element to observe)
   entries.forEach(entry => {
   
      // If the element is visible
    if (entry.isIntersecting) {
      entry.target.classList.add('left-right');
	  return; // if we added the class, exit the function
    }

    // We're not intersecting, so remove the class!
   entry.target.classList.remove('left-right');
  });
});

//tell observer to track the element
observer.observe(document.querySelector('.demo'))

«entry.target.classList.remove («влево-вправо»);» строка удаляет класс анимации .left-right всякий раз, когда элемент div не виден на экране. Помните, в наших настройках анимации при 0% мы установили -90vh, чтобы мы могли видеть 10vh? Причина этого в том, что функция javascript по-прежнему будет видеть элемент div, а класс .left-right не будет удален во время выполнения анимации. Если класс анимации .left-right сделает элемент невидимым на экране в какой-то момент, он даст вам другой результат при вызове функции. Сценарий js не увидит его на экране, поэтому удалит класс, а затем элемент div вернется в исходное положение, слева: 0vh, который виден, затем он снова вызовет функцию и добавит анимацию. И тогда он снова станет невидимым из-за исходного положения анимации. Класс будет удаляться и добавляться снова и снова, вы не увидите процесс анимации, как вы ожидаете. Вы можете удалить строку «entry.target.classList.remove('left-right');» если вы хотите, чтобы анимация запускалась только один раз, то все будет в порядке, если класс с вашей анимацией в какой-то момент сделает элемент невидимым.

Это всего лишь один из способов анимации, основанный на позиции/видимости. Наличие анимации на вашем сайте привлекает и заставляет зрителей оставаться дольше.