使用滚动淡入淡出图像然后滚动页面内容

Question

When my page loads there is an image that will appear.当我的页面加载时，会出现一个图像。 What I want to do is on scroll, fade out that image and fade in another image.我想要做的是滚动，淡出该图像并淡入另一张图像。 While this animation is happening, I don't want the images to be scrolled up.虽然这个 animation 正在发生，但我不希望图像向上滚动。 It's only when the second image has faded in completely that I want to be able to scroll to the content that follows on the page.只有当第二张图像完全消失时，我才希望能够滚动到页面上的内容。

I used this answer to come up with part of a solution .我用这个答案提出了部分解决方案。

html html

<body>
    <div id="container">
        <div id="mainImg">
            <img src="images/1.png" style="height: 100%">
        </div>
        <div id="brandStatement">
            <img src="images/2.png" style="height: 100%">
        </div>      
    </div>

    <img src="images/map.png">
    
    <script type="text/javascript" src="main.js"></script>
</body>

js js

let locked         = false,
    mainImage      = document.getElementById('mainImg'),
    brandStatement = document.getElementById('brandStatement');

window.addEventListener('scroll', function() {
    if (!locked) {
        window.requestAnimationFrame(function() {

            brandStatement.style.opacity = Math.min(window.scrollY / window.innerHeight, 1);
            
            if (brandStatement.style.opacity === '1') {
                    // scroll to next content
            }

            locked = false;
        });
    }
    locked = true;
});

css css

#container {
    height: 200vh;
    width: 100%;
}

#mainImg {
    text-align: center;
    width: 100%;
    height: 100%;
    position: fixed;
}

#brandStatement {
    text-align: center;
    width: 100%;
    height: 100%;
    position: fixed;
    opacity: 0;
}

Answer 1

I didn't see a possible solution to the problem by improving your code.我没有看到通过改进代码来解决问题的可能方法。 This is a personal approach.这是个人方法。

What I'm doing here, is changing the opacity of the element one inside the cover container as the user scrolls down the page, revealing the image below.我在这里所做的是，当用户向下滚动页面时，改变cover容器内元素one不透明度，显示下面的图像。 After the opacity changes have been done, the script will change the filling container display style property from none to block .完成不透明度更改后，脚本会将filling容器显示样式属性从none更改为block 。 This element is just meant to fill the upper side of the cover container to prevent it from moving up when the position style property is changed from fixed to null .当position样式属性从fixed更改为null时，此元素仅用于填充cover容器的上侧以防止其向上移动。

And the reversed logic applies when scrolling back up.向上滚动时适用相反的逻辑。

 const one = document.getElementById('one') const cover = document.getElementById('cover') const filling = document.getElementById('filling') window.addEventListener('scroll', () => { let scrollY = window.scrollY let bottomHeight = window.innerHeight if(scrollY / bottomHeight <= 1){ one.style.opacity = 1 - ( scrollY / bottomHeight ) cover.style.position = 'fixed' filling.style.display = 'none' } else{ cover.style.position = null filling.style.display = 'block' } })

 *{padding:0;margin:0;border-size: border-box} body{ height: 3500px; } img { width: 100%; height: 100vh; } #filling{ height:100vh; width:100% } #cover{ height:100vh; width:100%; } #cover > div{ height:100vh; width:100%; position:absolute; } #one{ z-index:2; } #two{ z-index:1; }

 <body> <div id='filling' style='display:none'> </div> <div id='cover' style='position:fixed'> <div id='one'> <img src='https://picsum.photos/id/200/1000/1000'> </div> <div id='two'> <img src='https://picsum.photos/id/201/1000/1000'> </div> </div> <div> <img src='https://picsum.photos/id/206/1000/1000'> </div> <div style='margin-top:-10px'> <img src='https://picsum.photos/id/204/1000/1000'> </div> <div style='margin-top:-10px'> <img src='https://picsum.photos/id/208/1000/1000'> </div> </body>

使用滚动淡入淡出图像然后滚动页面内容

问题描述

1 个解决方案

解决方案1
3 已采纳 2022-01-25 19:02:03

使用滚动淡入淡出图像然后滚动页面内容

问题描述

1 个解决方案

解决方案1 3 已采纳 2022-01-25 19:02:03

解决方案1
3 已采纳 2022-01-25 19:02:03