没有jQuery的Animate.css？

Question

I am trying to make animation on page scrolling.

I use the Animate.css library.

The documentation only shows how to use it with jQuery, but I'm currently learning how to use Vanilla Javascript. I was trying to use window.pageYOffset but that only works when the browser reaches the container and not when it is revealed by the scroll.

Answer 1

Here's an example how you can animate without jQuery. Investigate the MDN doc page window.onscroll for the scroll event.

const $item = document.querySelector('.starred-item');
$item && ($item.classList.add('animated', 'bounce'));

Answer 2

Another example of vanilla JS animation without jQuery (or any other libraries).

 var v = 0; var delta = 1; function verticalMove() { redBox = document.getElementById('verticalDiv') v += delta; redBox.style.top = v + "px"; if (v <= 0) delta = 1; if (v >= 50) delta = -1; } function startMove(event) { setInterval(verticalMove, 30); event.target.onclick=""; } 

 .verticalDiv { position: absolute; top: 0px; right: 500px; width: 100px; height: 100px; background: red; } 

 <div class="verticalDiv" id="verticalDiv" onclick="startMove(event)"></div>