Анимация, если блок в зоне видимости

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

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<style type="text/css">
        div {
            width: 400px;
            height: 400px;
            margin-right: 100%;
            background: #eee;
            margin-bottom: 10px;
        }
</style>
<script type="text/javascript">
var window_height = (window.innerHeight ? window.innerHeight : (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.offsetHeight));
window.addEventListener('scroll', function() {
    var elements = document.querySelectorAll('div');
    var top = document.body.scrollTop;
    var find = false;
    elements.forEach(function(el) {
        var el_top = el.offsetTop;
        if(el_top > top && ((el.clientHeight + el_top) < (top + window_height))) {
            el.style.backgroundColor = "#999";
        }
    });
});