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