Здравствуйте. Мне нужно реализовать следующий эффект. Когда пользователь докручивает до определенного места страницы запускается анимация. Если пользователь прокручивает дальше, то анимация проигрывается вперед, если крутит назад, то анимация проигрывается назад. Скорость анимации определяется скоростью прокрутки мыши. При этом страница не должна прокручиваться.
Чтобы реализовать такое поведение я помещаю прозрачный див с абсолютным позиционированием над блоком с анимацией. В стилях дива стоит overflow : auto. В этот див вставлен другой див заведомо большего размера, который и будет прокручиваться при прокрутке страницы. При этом сама страница будет стоять на месте. В зависимости от уже прокрученной области анимация идет вперед или назад:
<!doctype html>
<html lang="ru">
<head>
<style type="text/css">
.animation-div{
height: 600px;
background-color: #ffff00;
}
.orange{
background-color: orange;
}
.red{
background-color: red;
}
.hidden-div{
position: absolute;
top: 400px;
left: 0;
width: 100%;
height: 600px;
overflow: auto;
opacity: .0;
background-color: blue;
}
.hidden-div div{
height: 1200px;
width: 60%;
}
</style>
</head>
<body>
<div class="hidden-div test2">
<div></div>
</div>
<div style="height: 400px; background-color: ghostwhite"></div>
<div class="animation-div">
Див где будет происходить анимация. Но текст нельзя выделить.
<a href="#">На ссылку нельзя нажать.</a>
</div>
<div style="height: 400px; background-color: ghostwhite"></div>
<script type="text/javascript">
var hiddenDiv = document.getElementsByClassName('hidden-div')[0],
animationDiv = document.getElementsByClassName('animation-div')[0],
counter = 0;
hiddenDiv.onscroll = function(){
counter = hiddenDiv.scrollTop
console.log(counter);
if(counter > 0 && counter < 200) animationDiv.className = 'animation-div';
if(counter > 200 && counter < 400) animationDiv.className = 'animation-div orange';
if(counter > 400 && counter < 600) animationDiv.className = 'animation-div red';
}
</script>
</body>
</html>
Проблема в том, что на элементы, которые накрывает прозрачный див, нельзя нажать или выделить. Как можно реализовать аналогичное поведение, но без использования накрывающего прозрачного дива. Или же с ним, но чтобы с элементами можно было взаимодействовать.
