Добрый день,
Подскажите, пожалуйста, есть лендинг, мне нужно, что бы при прокрутке страницы, когда div отображается на экране монитора, с ним происходила анимация, а именно - div чуточку поднимается вверх.
Мои мысли и предположения следующие:
Когда наш div будет равен текущим координатом, то мы вызываем class с css анимацией.
Вы меня строго не судите, только начал, ломаю голову.
Я это написал так(пример):
<!DOCTYPE html>
<html>
<head>
<style>
.second {
transform: translate(0,-150px);
-webkit-transform: translate(0,-150px);
-o-transform: translate(0,-150px);
-moz-transform: translate(0,-150px);
}
</style>
</head>
<body>
<div class="first"></div>
<div id='about' class="second"></div>
<div class="third"></div>
<script type="text/javascript">
function animateBlock (){
var elem = document.getElementById('about');
var titlestyles = document.getElementsByClassName('.second');
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (elem == scrollTop){
return titlestyles;
}
}
animateBlock();
</script>
</body>
</html>