Анимация на чистом JS
Добрый день,
Подскажите, пожалуйста, есть лендинг, мне нужно, что бы при прокрутке страницы, когда 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>
|
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Спасибо
|
JohnJohn,
не понимаю вашей логики, но функцию надо ставить на прокрутку scroll |
|
Спасибо, помогло!
|
Цитата:
|
<!DOCTYPE html>
<html>
<head>
<style>
.transform {
translate(0,-150px);
-webkit-transform: translate(0,-150px);
-o-transform: translate(0,-150px);
-moz-transform: translate(0,-150px);
}
</style>
</head>
<body>
<div id='page'>
<div class="first"></div>
<div id='about'></div>
<div class="third"></div>
</div>
<script type="text/javascript">
var animateElement = document.getElementById('page');
var getPage = animateElement.getBoundingClientRect().top + window.pageYOffset;
var elementIcon = document.getElementById('about');
window.onscroll = function() {
if (animateElement.classList.contains('transform') && window.pageYOffset < getPage) {
elementIcon.classList.remove('transform');
} else if (window.pageYOffset > getPage) {
elementIcon.classList.add('transform');
}
};
</script>
</body>
</html>
|
Вы хотите чтобы анимация срабатывала постоянно как только элемент попадал в зону видимости?
|
Да, и что я ещё не продумал, так это если я захочу к примеру всем классам присвоить через
var elementIcon = document.getElementsByClassName('about');
<div class='about'></div> <div class='about'</div> <div class='about'</div> то .transform не добавится/удалится, ща буду думать....... |
| Часовой пояс GMT +3, время: 19:39. |