如何仅当文本块从用户视图中隐藏时,如何使文本块具有“ 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;
}