爆炸.js并创建滚动视图和不透明度

Question

我是一个初学者，而且是js的初学者。我正在尝试学习如何使用爆炸.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

听起来你只是想弄清楚当特定元素在视图中时如何触发代码(你的爆炸.js代码((而不是在点击时这样做(。下面是一个使用getBoundingClientRect的示例，这是一个用于确定此类事物的有用函数：

(滚动代码片段，直到黄色页脚进入视图。这将触发控制台.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>