javascript JS：滚动以触发动画

Posted 2021-05-04

import offset from './getOffset';

//Ref: https://envato.com/blog/triggering-css-animations-scroll/

export default function() {

    let windowHeightPlusPadding = window.outerHeight * .8;
    let scrolled = document.documentElement.scrollTop || document.body.scrollTop;
    let targets = document.querySelectorAll('[data-animation]:not(.animated)');

    [].forEach.call(targets, function(elem){

      let offsetTop = offset(elem).top;

      if (scrolled + windowHeightPlusPadding > offsetTop) {
        if (elem.hasAttribute('data-timeout')) {
          window.setTimeout(function() {
            if(-1 == elem.className.indexOf('animated'))
              elem.className = elem.className + ' animated ' + elem.dataset.animation
          }, parseInt(elem.dataset.timeout) );
        } else {
          if(-1 == elem.className.indexOf('animated'))
            elem.className = elem.className + ' animated ' + elem.dataset.animation
        }
      }
    });

}

import revealOffset from './util/reavealOffset'

//Run on Page Refresh
revealOffset();

//Run on Scroll
window.onscroll = revealOffset();

//Ref: https://plainjs.com/javascript/styles/get-the-position-of-an-element-relative-to-the-document-24/

export default function(element) {

  var rect = element.getBoundingClientRect(),
  scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
  scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  return { top: rect.top + scrollTop, left: rect.left + scrollLeft }

}