Активировать анимацию в определенных местах прокрутки - PullRequest
Новая
       11

Активировать анимацию в определенных местах прокрутки

0 голосов
/ 21 мая 2019

Я создаю страницу резюме, куда я включил анимации - некоторые из них работают с дополнительной библиотекой: Animate css.Это работает, но анимации запускаются, когда страница полностью загружена - и я хочу, чтобы они происходили при прокрутке до положения, где начинается div (он находится в середине страницы)

Я пытался сделать это с элементом .scrollTop, но тогда я мог бы включить значение только в px - и мне нужна отзывчивая страница (я использую calc()). Также была возможность, что я сделал что-то не так - но я не заметил

Так же, как я сказал- Я хочу запустить анимацию, когда div окажется в зоне видимости.

1 Ответ

0 голосов
/ 21 мая 2019

Это возможно, если вы комбинируете JQuery с JavaScript DOM или просто с JavaScript DOM.

Моя функция может быть не лучшим способом, но она работает и довольно проста.

Мой пример запускает анимацию, когда серый делитель Верхнее смещение относительно области просмотра меньше 100.

(Если вы хотите использовать это, создайте 2 класса CSS (1 с анимацией, 1 без) и установите для строк идентификаторов свои идентификаторы HTML) 

.Initial{
background-color: #ccc;
color: black;
position: fixed;
}
.AfterScroll{
background-color: #fff;
color: green;
position: fixed;
animation-name: Anim;
animation-duration: 1.4s;
}
@keyframes Anim{
25% {color: red;}
50% {color: blue;}
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript">

$( "#AnimationElementID" ).addClass("AfterScroll");
var set = false; // will be false on page load

$( window ).scroll(function() { //On Scroll Event Handler, Could also be window.onscroll (DOM)
   // JS HTML DOM get element position relative to viewport
  var rect = document.getElementById("AnimationElementTriggerDivID").getBoundingClientRect();
  // This is the offset at where your animation would start, 100 = div is 100px from viewport top
  if( rect.top <100 && set==false){ 
  $( "#AnimationElementID" ).toggleClass("Initial");
  $( "#AnimationElementID" ).toggleClass("AfterScroll");
  set=true; // so we only toggle the class once 
  }
  
});
</script>
</head>
<body>
<p class="Initial" id="AnimationElementID">
Hi im a text and I will change color if you scroll
</p>
<div id="AnimationElementTriggerDivID" style="background-color: #ccc; position: relative; top:200px; width:20px; height:2000px"> </div>


</body>
</html>

Может быть, кто-то другой может предоставить лучшую опцию JQuery only или более чистую функцию, но до тех пор не стесняйтесь использовать это.

PS: если возможно, предоставьте фрагменты кода, чтобы люди могли помочь вам лучше и быстрее.

...