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

Question

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

Answer 1

您可以使用

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

Answer 2

你可以使用像

这样的东西

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

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

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

Can I trigger an animation when an element reaches half way in the viewport?

javascript

triggers

intersection-observer