問題：十字路口觀察員 - Animation

Question

我整個周末都在努力了解我想要實現的 animation 的 Intersection Observer Animation。 根據我對路口觀察者的理解，我的代碼應該按我的預期工作，但事實並非如此

我的目標是當元素到達視口內的某個點時滾動 animation 開始。 在我的代碼筆中，我標記了 animation 應該以邊框開頭的點。 但是，一旦 div 進入視口，animation 就會啟動。

此外，當元素再次低於邊界時，animation 應該停止。

我將非常感謝任何有助於實現我的目標的幫助。

代碼示例： https://codepen.io/aki-sol/pen/RwJPJrW?editors=1111

此外，如果您對我的 animation 方法有任何反饋，我很高興收到批評/更好的方法。

<div class="text">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita provident unde, sequi aliquid porro ipsa vitae nulla dolor neque aliquam quisquam nam magnam architecto, consequuntur est in beatae, nihil optio.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, architecto eveniet assumenda praesentium in laboriosam vitae atque, sunt minima aliquid quam distinctio voluptatum commodi veniam iure officia provident voluptas ea?

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet quo commodi laborum perspiciatis nemo voluptates quod odio quis necessitatibus perferendis? Ipsum, quasi nesciunt. Debitis omnis consequuntur laboriosam veniam, non impedit!
</div>

<div class="box">
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
</div>

<div class="text">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita provident unde, sequi aliquid porro ipsa vitae nulla dolor neque aliquam quisquam nam magnam architecto, consequuntur est in beatae, nihil optio.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, architecto eveniet assumenda praesentium in laboriosam vitae atque, sunt minima aliquid quam distinctio voluptatum commodi veniam iure officia provident voluptas ea?

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet quo commodi laborum perspiciatis nemo voluptates quod odio quis necessitatibus perferendis? Ipsum, quasi nesciunt. Debitis omnis consequuntur laboriosam veniam, non impedit!
</div>

body {
  position: relatvie;
  heig;
}

body:after {
  content: '';
  position: fixed;
  bottom: 40%;
  height: 1px;
  width: 100%;
  border-bottom: 1px solid blue;
}

.text {
  background-color: brown;
  color: white;
  height: 150vh;
}

.box {
    display: flex;
    position: relative;
}

.box-content {
  width: 200px;
  height: 200px;
  background-color: greenyellow;
  margin-right: 50px;
}

const boxElement = document.querySelector(".box");

//this function calls the aniamtion function and observes the window scroll position
function getWindowScrollPos() {
    let windowPosition = window.scrollY;

    window.addEventListener("scroll", () => {
        windowPosition = window.scrollY;

        animateBox(boxElement, windowPosition);
    });
}

function animateBox(box, scrollPosition) {
    let boxOffsetPosition = scrollPosition;

    box.style.left = `${-boxOffsetPosition}px `;
}

function boxObserver(element) {
    const observer = new IntersectionObserver(
        (entries, observer) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    getWindowScrollPos();
                }
            });
        },
        { rootMargin: "0% 0% 60% 0%" }
    );

    observer.observe(element);
}

boxObserver(boxElement);

非常感謝！

Answer 1

我想這里有兩點需要注意。

首先， Intersection Observer（連同 Resize Observer）不是在線沙箱中測試的最佳選擇，因為它們在iframe中運行代碼，這會導致這種行為。 您應該嘗試在瀏覽器中運行您的代碼。

有與此問題相關的問題。 例如： 在 codepen 中，Intersection observer 與瀏覽器有不同的行為 window

其次，您可能誤解rootMargin 。 您將其設置為0% 0% 60% 0% ，這意味着“將根高度的 60% 添加到最根，並將其用作相交的底部邊框”。

你真正想要的是減少底部邊框，而不是增加。 因此，只需將其設置為0% 0% -40% 0%即可。

Intersection Observer 教程幫助我理解了rootMargin的怪異之處。 也許它對你也有用。

演示

這是您的代碼片段，我對其進行了一些更改以使其在iframe中工作。 我添加了一個容器節點並使用它來代替 window。

 const boxElement = document.querySelector('.box'); const container = document.getElementById('container'); function setupListener() { let scrollPosition = container.scrollTop; animateBox(boxElement, scrollPosition); container.addEventListener('scroll', () => { scrollPosition = container.scrollTop; animateBox(boxElement, scrollPosition); }); } function animateBox(box, scrollPosition) { let boxOffsetPosition = scrollPosition; box.style.left = `${-boxOffsetPosition}px`; } function boxObserver(element) { const observer = new IntersectionObserver( (entries, observer) => { entries.forEach((entry) => { if (entry.isIntersecting) { setupListener(); } }); }, { root: document.getElementById('container'), rootMargin: `0px 0px -40% 0px` } ); observer.observe(element); } boxObserver(boxElement);

 body { margin: 0; overflow: hidden; } body:after { content: ""; position: fixed; bottom: 40%; height: 1px; width: 100%; border-bottom: 1px solid blue; }.container { overflow: scroll; max-height: 100vh; }.text { background-color: brown; color: white; height: 150vh; }.box { display: flex; position: relative; }.box-content { width: 200px; height: 200px; background-color: greenyellow; margin-right: 50px; }

 <div class="container" id="container"> <div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita provident unde, sequi aliquid porro ipsa vitae nulla dolor neque aliquam quisquam nam magnam architecto, consequuntur est in beatae, nihil optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, architecto eveniet assumenda praesentium in laboriosam vitae atque, sunt minima aliquid quam distinctio voluptatum commodi veniam iure officia provident voluptas ea? Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet quo commodi laborum perspiciatis nemo voluptates quod odio quis necessitatibus perferendis? Ipsum, quasi nesciunt. Debitis omnis consequuntur laboriosam veniam, non impedit, </div> <div class="box"> <div class="box-content"></div> <div class="box-content"></div> <div class="box-content"></div> <div class="box-content"></div> <div class="box-content"></div> <div class="box-content"></div> <div class="box-content"></div> <div class="box-content"></div> <div class="box-content"></div> <div class="box-content"></div> <div class="box-content"></div> <div class="box-content"></div> </div> <div class="text"> Lorem ipsum. dolor sit amet consectetur adipisicing elit, Expedita provident unde, sequi aliquid porro ipsa vitae nulla dolor neque aliquam quisquam nam magnam architecto, consequuntur est in beatae. nihil optio, Lorem ipsum dolor sit amet. consectetur adipisicing elit, Et, architecto eveniet assumenda praesentium in laboriosam vitae atque? sunt minima aliquid quam distinctio voluptatum commodi veniam iure officia provident voluptas ea. Lorem ipsum dolor sit amet consectetur adipisicing elit? Eveniet quo commodi laborum perspiciatis nemo voluptates quod odio quis necessitatibus perferendis, Ipsum. quasi nesciunt, Debitis omnis consequuntur laboriosam veniam, non impedit! </div> </div>

有什么可以改進的

此外，如果您對我的 animation 方法有任何反饋，我很高興收到批評/更好的方法。

好吧，您肯定應該考慮在十字路口開始后您將擁有的滾動偵聽器。 如果不刪除它，它將掛起。 或者更糟的是，它們會在每個十字路口增加。 不是什么好事。

此外，最好為transform設置動畫，而不是left 。 這有利於優化。 否則你會得到 junky animation 這將凍結整個站點。 查看谷歌的這組文章： web.dev/animations/ 。