Мой предыдущий код содержал ошибки и на работал, если пользователь прокручивал страницу с помощью ползунка. Вот этот работает лучше:
<!doctype html>
<html lang="ru">
<head>
<style type="text/css">
.animation-div{
height: 300px;
background-color: #ffff00;
}
.orange{
background-color: orange;
}
.red{
background-color: red;
}
</style>
</head>
<body>
<div style="height: 300px; background-color: ghostwhite"></div>
<div class="animation-div">Див где будет происходить анимация.</div>
<div style="height: 600px; background-color: ghostwhite"></div>
<script type="text/javascript">
var animationDiv = document.getElementsByClassName('animation-div')[0],
count = 0;
function wheelMove(e){
if(document.body.scrollTop > 300 && document.body.scrollTop < 350){
var delta = e.deltaY
count += delta
if(count < 1) count = 0
if(count > 299) count = 300
if(count > 0 && count < 300){
e.preventDefault()
}
if(count > 0 && count < 100) animationDiv.className = 'animation-div';
if(count > 100 && count < 200) animationDiv.className = 'animation-div orange';
if(count > 200 && count < 300) animationDiv.className = 'animation-div red';
}
}
animationDiv.onwheel = wheelMove;
// Если пользователь прокручивает стараницу не мышкой, а использует ползунок, тогда в зависимости от прокрученной страницы показывается или первый кадр или последний.
function onscrollAmimation(){
var currentTop = document.body.scrollTop
console.log(currentTop);
if(currentTop < 300){
animationDiv.className = 'animation-div';
}else if(currentTop > 350){
animationDiv.className = 'animation-div red';
}
}
window.onscroll = onscrollAmimation
</script>
</body>
</html>