Анимация на чистом JS [Архив форума]

JohnJohn

04.06.2017, 17:32

Добрый день,

Подскажите, пожалуйста, есть лендинг, мне нужно, что бы при прокрутке страницы, когда 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>

рони

04.06.2017, 18:52

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

... ваш код...

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

JohnJohn

04.06.2017, 19:00

Спасибо

рони

04.06.2017, 19:20

JohnJohn,
не понимаю вашей логики, но функцию надо ставить на прокрутку scroll

рони

04.06.2017, 19:22

JohnJohn,
может чем поможет
анимация чисел в зоне видимости jquery (https://javascript.ru/forum/misc/60390-animaciya-chisel-pri-prokrutke-stranicy-2.html#post439702)

JohnJohn

04.06.2017, 20:26

Спасибо, помогло!

j0hnik

04.06.2017, 20:41

Спасибо, помогло!
напишите сюда, мы глянем :write:

JohnJohn

04.06.2017, 21:27

<!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>

j0hnik

04.06.2017, 21:39

Вы хотите чтобы анимация срабатывала постоянно как только элемент попадал в зону видимости?

JohnJohn

04.06.2017, 21:51

Да, и что я ещё не продумал, так это если я захочу к примеру всем классам присвоить через

var elementIcon = document.getElementsByClassName('about');

<div class='about'></div>
<div class='about'</div>
<div class='about'</div>

то .transform не добавится/удалится, ща буду думать.......

j0hnik

04.06.2017, 22:25

используйте цикл для этих целей

JohnJohn

04.06.2017, 22:59

Вроде так, но не так))) Не помогает.

<!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>

рони

04.06.2017, 23:35

JohnJohn,
что хоть анимируется и когда?

JohnJohn

04.06.2017, 23:46

Анимируются иконки, когда попадают в область видимости экрана.

рони

04.06.2017, 23:50

JohnJohn,
а можно макет, где по клику происходит ваша анимация, хотябы одной иконки?

JohnJohn

05.06.2017, 00:06

По клику ничего происходить не должно. Отправил в лс

рони

05.06.2017, 00:09

По клику ничего происходить не должно. Отправил в лс

видимо вы не понимаите, что вас просят сделать.

JohnJohn

05.06.2017, 00:22

ааа, я понял, залить, позже сделаю

j0hnik

05.06.2017, 00:25

<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>

Я запутался и переписал заново все, так вроде все ок

рони

05.06.2017, 00:36

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>

j0hnik

05.06.2017, 00:39

JohnJohn,
<!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>
Зачетно!

JohnJohn

05.06.2017, 00:55

Блин, мужики, спасибо огромное, все круто работает, короче, я понял, есть к чему стремиться) Спасибо

JohnJohn

05.06.2017, 01:05

<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>

Я запутался и переписал заново все, так вроде все ок

тут единственное надо .add и .remove местами поменять, спасибо

JohnJohn

05.06.2017, 01:06

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>

очень четко