Javascript-форум - Анимация на чистом JS

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Анимация на чистом JS (https://javascript.ru/forum/misc/69188-animaciya-na-chistom-js.html)

Цитата:

Сообщение от рони (Сообщение 454509)

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>

Зачетно!

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

Цитата:

Сообщение от j0hnik (Сообщение 454506)

<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 местами поменять, спасибо

Цитата:

Сообщение от рони (Сообщение 454509)

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>

очень четко