Как добавить класс, если div виден пользователю?

[sovsem-nub]

На jQuery есть много различных эффектов, которые постепенно срабатывают при прокрутке страницы как здесь http://codepen.io/rmitchellnet/pen/kqDrE

принцип довольно простой:
изначально див такой

<div class="scrollimate content" style="perspective-origin: 50% 312px;"  data-animation="fadeInRight">What3</div>

как только див при прокрутке появляется в видимой области экрана, он становится таким

<div class="scrollimate content animated fadeInRight" style="perspective-origin: 50% 312px;"  data-animation="fadeInRight">What3</div>

то есть к нему просто добавляется 2 класса, если в нем есть свойство data-animation. один animated, второй берется из свойства дива data-animation.

Думаю такое можно сделать и на чистом javascript, но я не понимаю как сделать событие с див, если он в видимой части экрана. Подскажите пожалуйста.

[destus]

https://learn.javascript.ru/metrics-window

[sovsem-nub]

https://learn.javascript.ru/metrics-window

Это я читал. Я могу узнать положение прокрутки и высоту экрана. и соответственно предел от h1 до h2 в который должен попасть верх див, чтобы поменялся стиль. Но мне это не сильно поможет.
я не хочу всем див c data-animation раздавать при загрузке страницы свои id, а потом вешать событие на onscroll и сравнивать в нем координаты див с текущим окном. Как-то это иначе должно делаться.

[destus]

я не хочу всем див c data-animation раздавать при загрузке страницы свои id, а потом вешать событие на onscroll и сравнивать в нем координаты див с текущим окном. Как-то это иначе должно делаться.

Можно по таймеру проверять была прокрутка или нет. А дивы засунуть в массив и по очереди доставать.

var arr = [human,vegetables];
была прокрутка ? var el = arr.shift(); arr.push(el) /* показываем el */

[sovsem-nub]

оказывается готовая js библиотека есть. подрубил http://mynameismatthieu.com/WOW/ у меня работает