的Javascript：動畫事業部時，它是在視口中

Question

在看到頭4圈下面的圖片，

我無法弄清楚如何讓他們動畫如圖所示，當他們在視口中

Answer 1

您可以使用Intersection_Observer_API檢查時，該元素是在視口中並應用動畫。

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

function handleIntersectionEntry(entry) { 
if (entry.length > 0) { 
    const item = entry[0]; 
    const ratio = Math.floor(item.intersectionRatio); 
    if (ratio > 0) { 
    // ITEM IN VIEWPORT 
    } else if (ratio < 1) { 
    // ITEM OUT OF VIEWPORT 
    } 
} 


    const config = { 
    root: null, 
    threshold: [1.0], 
    rootMargin: "0px" 
    }; 

    this.Observer = new IntersectionObserver(
    handleIntersectionEntry, 
    config 
); 

    this.Observer.observe('YOUR DOM ELEMENT TO MONITOR'); 

填充工具爲所有browswer支持：https://github.com/w3c/IntersectionObserver/tree/master/polyfill