Анимация на чистом 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 не добавится/удалится, ща буду думать....... |
используйте цикл для этих целей
|
Вроде так, но не так))) Не помогает.
<!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="about"></div>
<div class="about"></div>
<div class="about"></div>
</div>
<script type="text/javascript">
var animateElement = document.getElementById('page');
var getPage = animateElement.getBoundingClientRect().top + window.pageYOffset;
var elementIcon = document.getElementsByClassName('about');
window.onscroll = function() {
for (i = 0; i < elementIcon.length; i++){
elementIcon[i].classList.add('transform');
}
if (animateElement.classList.contains('transform') && window.pageYOffset < getPage) {
elementIcon.classList.remove('transform');
} else if (window.pageYOffset > getPage) {
elementIcon.classList.add('transform');
}
};
</script>
</body>
</html>
|
JohnJohn,
что хоть анимируется и когда? |
Анимируются иконки, когда попадают в область видимости экрана.
|
JohnJohn,
а можно макет, где по клику происходит ваша анимация, хотябы одной иконки? |
По клику ничего происходить не должно. Отправил в лс
|
Цитата:
|
ааа, я понял, залить, позже сделаю
|
<html>
<head>
<style>
.transform {
color:red;
}
</style>
</head>
<body>
<div id='page'>
<div class="about">5454</div>
<div class="about">54545</div>
<div class="about">454545</div>
</div>
<script>
var flag = document.getElementById('page');
var animEl = document.getElementsByClassName('about');
function scr(){
var elHeigth = flag.getBoundingClientRect().top - window.innerHeight;
if(elHeigth <= 0 && Math.abs(elHeigth) <= window.innerHeight) {
for (i = 0; i < animEl.length; i++){
animEl[i].classList.add('transform');
}
}
else{
for (i = 0; i < animEl.length; i++){
animEl[i].classList.remove('transform');
}
}
}
window.addEventListener("scroll" , scr);
</script>
</body>
</html>
Я запутался и переписал заново все, так вроде все ок |
добавление класса в зоне видимости
JohnJohn,
описание если блок about полностью в зоне видимости(по высоте блока) ему добавляется класс, иначе снимается.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.transform {
transform: translate(0,-150px);
}
.about {
height: 50px;
width: 50px;
background-color: #FF00FF;
transition: all .8s ease-in;
margin-top: 1500px
}
</style>
</head>
<body>
<div id='page'>
<div class="about"></div>
<div class="about"></div>
<div class="about"></div>
</div>
<script>
window.addEventListener("DOMContentLoaded", anim, false)
window.addEventListener("scroll", anim, false);
function anim() {
[].forEach.call( document.querySelectorAll('.about'), function(el) {
checkViewport(el) ? el.classList.add("transform") : el.classList.remove("transform")
});
}
function checkViewport(a) {
var b = a.getBoundingClientRect();
return 0 < b.top && b.top + a.scrollHeight < window.innerHeight
};
</script>
</body>
</html>
|
Цитата:
|
Блин, мужики, спасибо огромное, все круто работает, короче, я понял, есть к чему стремиться) Спасибо
|
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 13:09. |