Форум

j0hnik · #11 (**permalink**) 04.06.2017, 22:25

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

JohnJohn · #12 (**permalink**) 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>

рони · #13 (**permalink**) 04.06.2017, 23:35

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

JohnJohn · #14 (**permalink**) 04.06.2017, 23:46

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

рони · #15 (**permalink**) 04.06.2017, 23:50

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

JohnJohn · #16 (**permalink**) 05.06.2017, 00:06

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

рони · #17 (**permalink**) 05.06.2017, 00:09

Сообщение от JohnJohn

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

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

JohnJohn · #18 (**permalink**) 05.06.2017, 00:22

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

j0hnik · #19 (**permalink**) 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>

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

рони · #20 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript