Animate objects everytime I scroll down a web page

Question

I want the animation to happen everytime I scroll down (only down, not up). I have come up with a js code but it works for both scrolling up and down.

var scroll = window.requestAnimationFrame || function(callback){
  window.setTimeout(callback,1000/60)
};

var elements = document.querySelectorAll(".question-box");

function loop(){
  elements.forEach(element => {
    if (isElementInViewport(element)){
      element.classList.add("visible");
    }else{
      element.classList.remove("visible");
    }
  });
  scroll(loop);
}

loop();

// Helper function from: http://stackoverflow.com/a/7557433/274826
function isElementInViewport(el) {
  // special bonus for those using jQuery
  if (typeof jQuery === "function" && el instanceof jQuery) {
    el = el[0];
  }
  var rect = el.getBoundingClientRect();
  return (
    (rect.top <= 0
      && rect.bottom >= 0)
    ||
    (rect.bottom >= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.top <= (window.innerHeight || document.documentElement.clientHeight))
    ||
    (rect.top >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight))
  );
}

Just try using Intersection observer API – Sanmeet Jun 17 '21 at 05:03 — Sanmeet, Jun 17 '21 at 05:03
https://stackoverflow.com/a/32757060/9140740 – לבני מלכה Jun 17 '21 at 05:03 — לבני מלכה, Jun 17 '21 at 05:03
Please add HTML to your post so that the code can be tested – 54ka Jun 17 '21 at 05:16 — 54ka, Jun 17 '21 at 05:16

score 0 · Answer 1 · answered Jun 17 '21 at 05:19

0

You can use a library called scrollreveal.js, Here is an example of scroll reveal:

anijs.github.io/examples/scrollreveal

You can read the documentation here:

scrollrevealjs.org/guide

answered Jun 17 '21 at 05:19

Krish Dev DB

17
6

Animate objects everytime I scroll down a web page

1 Answers1