используйте цикл для этих целей
|
Вроде так, но не так))) Не помогает.
<!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, время: 02:10. |