如何在滚动时缓慢向上移动文本？

Question

我想让我的文本在滚动时缓慢向上移动，但是当我这样做时，文本应该保留在屏幕上。就像 lightmatter 的网站一样。 https://lightmatter.co/，在传统计算园区

document.addEventListener("DOMContentLoaded", () => {
    const elements = document.querySelectorAll(".scrolling-text");

    const callbackFunction = function(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                elements.style.opacity = 1;
                window.addEventListener("scroll", scrollHandler);
            } else {
                elements.style.opacity = 0;
                window.removeEventListener("scroll", scrollHandler);
            }
        });
    };

    const observerOptions = {
        threshold: 0.3
    };

    const observer = new IntersectionObserver(callbackFunction, observerOptions);

    elements.forEach(element => {
        observer.observe(element);
    });

    function scrollHandler() {
        var scrollPosition = window.scrollY;
        elements.style.bottom = 20 - (scrollPosition * 0.2) + 'px';
    }

});

这不起作用，只能操纵文本

Answer 1

您的代码中似乎有一个小错误。 querySelectorAll 方法返回一个 NodeList，而不是单个元素。您需要迭代 NodeList 中的每个元素。这是更正后的代码：

javascript 复制代码 document.addEventListener("DOMContentLoaded", () => { const elements = document.querySelectorAll(".scrolling-text");

const callbackFunction = function(entries) {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            elements.forEach(element => {
                element.style.opacity = 1;
            });
            window.addEventListener("scroll", scrollHandler);
        } else {
            elements.forEach(element => {
                element.style.opacity = 0;
            });
            window.removeEventListener("scroll", scrollHandler);
        }
    });
};

const observerOptions = {
    threshold: 0.3
};

const observer = new IntersectionObserver(callbackFunction, observerOptions);

elements.forEach(element => {
    observer.observe(element);
});

function scrollHandler() {
    var scrollPosition = window.scrollY;
    elements.forEach(element => {
        element.style.bottom = 20 - (scrollPosition * 0.2) + 'px';
    });
}

});