Breaking News: Grepper is joining You.com. Read the official announcement!

scroll animation move

Sasuke Khan answered on April 16, 2022 Popularity 7/10 Helpfulness 1/10

answer scroll animation move

scroll animation move

Comment

// Detect request animation frame
var scroll = window.requestAnimationFrame ||
             // IE Fallback
             function(callback){ window.setTimeout(callback, 1000/1000)};
var elementsToShow = document.querySelectorAll('.show-on-scroll'); 

function loop() {

  elementsToShow.forEach(function (element) {
    if (isElementInViewport(element)) {
      element.classList.add('is-visible');
    } else {
      element.classList.remove('is-visible');
    }
  });

  scroll(loop);
}

// Call the loop for the first time
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))
  );
}

Popularity 7/10 Helpfulness 1/10 Language whatever

Source: Grepper

Tags: animation move scroll whatever

Link to this answer
Share Copy Link

Contributed on Apr 16 2022

Sasuke Khan

0 Answers Avg Quality 2/10

scroll animation move

Contents

More Related Answers

scroll animation move

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.