Показать сообщение отдельно
  #21 (permalink)  
Старый 05.06.2017, 00:39
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от рони Посмотреть сообщение
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>
Зачетно!
Ответить с цитированием