当元素到达视口的一半时，我可以触发 animation 吗？

Question

（JavaScript）我可以看到当元素进入和离开视口时使用 IntersectionObserver 触发 animation 是可能的 - 但是当元素到达视口的一半时有没有办法触发 animation？

Answer 1

你可以使用类似的东西

new IntersectionObserver(yourAnimation, {rootMargin: "0px 0px -50% 0px"})

当你的元素进入视口的上半部分时，它就会相交。 基本上将其高度的一半的负边距添加到根的底部边缘（这里是视口）

Answer 2

您可以使用

if(elment.offsetLeft==window.offsetWidth) {startAnimation()}
// or element.offsetTop and window.offsetHeight
//you should write the startAnimation function, it not a built-in function