仅当文本块不在用户视图中时才滚动ScrollIntoView(Blast.js)

时间:2018-09-04 00:10:11

标签: javascript blast.js

如何仅当文本块从用户视图中隐藏时,如何使文本块具有“ scrollintoviewout”动画?

查看示例:http://just-text.webflow.io/

在最小滚动时,文本块将返回其原始位置(并再次播放动画)。仅在用户看不见此块时才需要执行此操作。我将很感谢您的帮助

    window.addEventListener('scroll', (evt) => {
    const footer = document.getElementById('spans');
  const isInView = isScrolledIntoView(spans);
  if (isInView) {
  console.log('the element is in view and should now execute your code');
    $(function() {

  var words = $('h1').blast({
      delimiter: 'word'
    });

    words.each(function(i) {
      $(this).css({
        position: 'relative',
        top: 150,



      })

        .delay(i * 70)

        .animate({top: '50px'}, 400,); 



    });
  });

  } else {
  console.log('the element is out of view and shouldnt execute your code');
    // TODO: If element is not in view...
  }
})

function isScrolledIntoView(el) {
    const rect = el.getBoundingClientRect();
    const elemTop = rect.top;
    const elemBottom = rect.bottom;

    return elemTop < window.innerHeight && elemBottom >= 0;
}

0 个答案:

没有答案