На чем основываются плагины для скроллинга, на видимости объекта?

Question

[freeman0204]

Например wow.js, хочу сделать простую анимацию при скроллинге. Как проверить что элемент уже виден на экране и тогда включать какую то анимацию?

Comments

[Сергей delphinpro]

У элементов есть свойства, называемые метриками - это размеры и различные отступы, в т.ч. от краев страницы и краев экрана.
У окна есть scrollTop/
Простая математика.

[freeman0204]

Сергей, можно пример на пару строк? Пока не пойму как это слепить.

[Сергей delphinpro]

var scrollTop = ... // на сколько прокручено окно
var height = window.outerHeight // высота окна 
var elTop = // верхняя позиция элемента (offsetTop)

if (scrollTop + height > elTop && scrollTop < elTop) {
  // верхняя граница элемента находится в пределах видимости.
}

Если непонятно, возьмите лист бумаги, нарисуйте окно, длинную страницу частично видимую в окне, какой-то элемент на этой странице. Распишите все метрики, и всё встанет на свои места.

[freeman0204]

Сергей, Спасибо

Answer 1

[Алексей Склейнов]

не задавался вопросом о конкретике, хотя сам иногда использую wow , скорее всего - расчет положения блока по высоте