當元素到達視口的一半時，我可以觸發 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