多个横幅图像上的视差效果（不使用背景图像）

问：

我正在构建带有文本叠加的视差横幅图像，我不想使用 css。 背景图像来实现这一点，因为我正在构建一个可以由客户端更改的 Wordpress 主题。

取而代之的是，我想保留带有图像叠加层（和文本）的 DIV，在文档流中相对定位，并为此将其高度设置为大约 450px，并将其后面的相关图像放在另一个 DIV 中，该 DIV 在滚动时以视差庄园移动。

所以。。。当页面向上/向下滚动时，后面的图像会随之上下移动，但速度较慢，仍然相对于其父 DIV。

我可以每页用 1 张图片来做。 但是，当我添加更多图像时，我需要第 2 张和第 3 张图像上的 pageYOffset 仅在父 DIV 进入屏幕底部的视口时才开始移动图像。

因此，我尝试了许多 JS 解决方案，包括我最后一次尝试，使用交叉观察器，试图阻止后面的视差提前开始，但无济于事......

请帮忙...

这是标记

    <!-- First Parallax Content -->
    <div id="parallaxOne" class="parallax-content-container">
        <!-- Banner Image -->
        <div id="parallaxTargetOne" class="parallax-image-wrapper">
            <img src="IMG"alt="ALT">
        </div>
        <div class="inner-wrapper contained-content">
            <div class="quote-container">
                <!-- Featured Title -->
                <h2>FEATURED TITLE</h2>
                <!-- Sub Title -->
                <h3>SUB TITLE</h3>
            </div>
        </div>
    </div>

    <!-- Second Parallax Content -->
    <div id="parallaxTwo" class="parallax-content-container">
        <!-- Banner Image -->
        <div id="parallaxTargetTwo" class="parallax-image-wrapper">
            <img src="IMG"alt="ALT">
        </div>
        <div class="inner-wrapper contained-content">
            <div class="quote-container">
                <!-- Featured Title -->
                <h2>FEATURED TITLE</h2>
                <!-- Sub Title -->
                <h3>SUB TITLE</h3>
            </div>
        </div>
    </div>

这是简单的 css

.parallax-content-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 450px;
    // overflow: hidden;
    border: 8px dotted green; // To See The Problem
}
.parallax-image-wrapper {
    position: absolute;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    border: 10px solid red; // To See The Problem
}
.parallax-image-wrapper:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.025);
}
.parallax-image-wrapper > img {
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
.quote-container h2,
.quote-container h3 {
    color: #fff;
    text-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
}

这是我的JS |我尝试的第一种方法

const parallaxOne = document.getElementById('parallaxOne');
const parallaxTwo = document.getElementById('parallaxTwo');

window.addEventListener('scroll', function (event) {
    if (parallaxOne.getBoundingClientRect().top < window.innerHeight) {
        const firstParallaxEffect = element1 => {
            console.log('In the viewport');
            let scrolled = window.pageYOffset;
            let rate = scrolled * -0.175;
            element1.style.top = window.pageYOffset;
            element1.style.transform = 'translate3d(0px, ' + rate + 'px, 0px)';
        };
        firstParallaxEffect(document.getElementById('parallaxTargetOne'));
    }

    if (parallaxTwo.getBoundingClientRect().top < window.innerHeight) {
        const secondParallaxEffect = element => {
            console.log('In the viewport');
            let scrolled = window.pageYOffset;
            let rate = scrolled * -0.175;
            element.style.top = window.pageYOffset;
            element.style.transform = 'translate3d(0px, ' + rate + 'px, 0px)';
        };
        secondParallaxEffect(document.getElementById('parallaxTargetTwo'));
    }
});

我尝试的第二种方式

const parallaxOne = document.getElementById('parallaxOne');
const elementOne = document.getElementById('parallaxTargetOne');
const optionsOne = {
    root: null,
    threshold: 0,
    rootMargin: '0px',
};
const parallaxTwo = document.getElementById('parallaxTwo');
const elementTwo = document.getElementById('parallaxTargetTwo');
const optionsTwo = {
    root: null,
    threshold: 0,
    rootMargin: '0px',
};

const obsOne = new IntersectionObserver(function (entries, obsOne) {
    entries.forEach(entry => {
        window.addEventListener('scroll', function (event) {
            let scroll = window.pageYOffset;
            let rate = scroll * -0.17;
            elementOne.style.transform =
                'translate3d(0px, ' + rate + 'px, 0px)';
        });
    });
}, optionsOne);
obsOne.observe(parallaxOne);

const obsTwo = new IntersectionObserver(function (entries, obsTwo) {
    entries.forEach(entry => {
        window.addEventListener('scroll', function (event) {
            let scroll = window.pageYOffset;
            let rate = scroll * -0.17;
            elementTwo.style.transform =
                'translate3d(0px, ' + rate + 'px, 0px)';
        });
    });
}, optionsTwo);
obsTwo.observe(parallaxTwo);