Question

我是一个初学者，并且是JS中的扎实入门者。我正在尝试学习如何使用blast.js并制作了动画样本。我需要使动画从scrollintoview开始而不是从click开始-我应该怎么做？另外-我需要弄清楚如何在动画结束时将每个跨度的不透明度设为100％。

帮我解决这个问题。这些问题是基本的，但是我们都从它们开始。

    $(function() {

  $('#test').on('click', function () {
    // Blasts the title
    var words = $('h1').blast({
      delimiter: 'word'
    });

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



      })

        .delay(i * 70)

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


    });
  });
});

Answer 1

听起来好像您只是想弄清楚在查看特定元素时（而不是单击时）如何触发代码（您的blast.js代码）。这是一个使用getBoundingClientRect的示例，该示例对于确定这种情况非常有用：

（滚动代码段，直到出现黄色页脚。这将触发console.log消息，向您显示应该在哪里执行代码）

window.addEventListener('scroll', (evt) => {
	const footer = document.getElementById('footer');
  const isInView = isScrolledIntoView(footer);
  if (isInView) {
  console.log('the element is in view and should now execute your code');
  	// TODO: Run Blast.js code here...
  } 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;
}

section {
  display: grid;
  grid-template-rows: 250px 1000px 250px;
}
header {
    background: red;
  }
  main {
    background: pink;
  }
  footer {
    background: yellow;
  }

<section>
  <header>Header</header>
  <main>When the Footer (yellow div) scroll in, the code should run</main>
  <footer id="footer">Footer</footer>
</section>

Blast.js并创建scrollintoview和不透明度

1 个答案: