Снимать класс у div если он вне поля зрения

Question

На сайте есть много блоков, которые анимированы с помощью добавления класса t-animate_started, срабатывает когда доскролили до блока. Как сделать так, чтобы когда блок вне поля видимости класс снимался? Подскажите пожалуйста решение или же пример с похожей реализацией на js или jquery.

Answer 1

const elements = document.querySelectorAll('span')

const toggleClass = entry => {
  if (entry.isIntersecting)
    entry.target.classList.add('t-animate_started')
  else
    entry.target.classList.remove('t-animate_started')
}

const callback = entries => entries.forEach(toggleClass)

// опция threshold указывает на сколько процентов
// блок за которым происходит слежение
// должен быть виден, чтобы отработала callback-функция
// в моем случае callback-функция отработает
// когда квадрат томатного цвета полностью покажется на экране
// или хотя бы немного выйдет за экран
// (если он уже был виден полностью до этого)
const options = { threshold: 1 } // 1 === 100%
const observer = new IntersectionObserver(callback, options)
elements.forEach(element => observer.observe(element))

body {
  margin: 0;
}

div {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

span {
  height: 100px;
  width: 100px;
  background-color: tomato;
  transition: 1s;
}

span.t-animate_started {
  transform: rotate(360deg);
}

<div><span></span></div>
<div><span></span></div>
<div><span></span></div>

БЛОГ НА HUSL

Снимать класс у div если он вне поля зрения

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