求助：如何实现滚动时图片淡入效果？现有代码致内容消失

我想实现滚动时图片的淡入（fade-in）效果，尝试了一些方法但未成功，当前我的Codepen中图片和文字都消失了。我仍在学习相关技术，请问如何实现该效果？

问题代码 #

HTML #

<section id="histoire">
    <header>
        <h1>Histoire</h1>
    </header>

    <div class="histoire_texte reveal">
        <div><span><img src="https://www.pngplay.com/wp-content/uploads/13/Pngitem-PNG-Clipart-Background.png"></span></div>

        <div><span><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur nulla aperiam veniam tempora labore minus nam saepe vero cum itaque alias, dolor, odio iste tempore placeat quas nihil sit fuga? 

        <br><br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur nulla aperiam veniam tempora labore minus nam saepe vero cum itaque alias, dolor, odio iste tempore placeat quas nihil sit fuga?

        <br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, assumenda?</p></span></div>
        
        <div><span><img src="https://www.pngplay.com/wp-content/uploads/13/Pngitem-PNG-Clipart-Background.png"></span></div>
    </div>
</section>

CSS #

#histoire{
    background-size: cover;
    background-position: top center;
}

#histoire header{
    width: 100%;
    display: flex;
    justify-content: center;
}

#histoire h1{
    border-bottom:5px solid #1B1B1B;
    width: 40%;
    font-family: englishtowne, sans-serif;
    font-size: 10rem;
    font-weight: normal;
    color: #1B1B1B;
    justify-content: center;
    display: flex;
}

.histoire_texte{
  display: flex;
  flex-wrap: wrap;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  justify-content: space-between;
  align-items: center;
  align-content: center;
}

.histoire_texte div {
    margin: auto;
  height: 500px;
  width: 33%;
  margin-bottom: 10px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.histoire_texte img{
    width: 60%;
  display: flex;
  margin: auto;
}

.histoire_texte p{
    font-size: 1.5rem
    }

.reveal{
    position: relative;
    transform: translateY(150px);
    opacity: 0;
    transition: all 2s ease;
}

.reveal.active{
    transform: translateY(0px);
    opacity: 1;
}

JavaScript #

window.addEventListener('scroll', reveal);

function reveal(){
    var reveals = document.querySelectorAll('reveal');

    for(var i = 0; i < reveals.length; i++){

        var windowheight = window.innerHeight;
        var revealtop = reveals[i].getBoundingClientRect().top;
        var revealpoint = 150;

        if(revealtop < windowheight - revealpoint){
            reveals[i].classList.add('active');
        }
        else{
            reveals[i].classList.remove('active');
        }
    }
}

修复方案 #

你的代码存在两个核心问题：

1. 类选择器缺失前缀：JavaScript中document.querySelectorAll('reveal')是查找<reveal>标签，但目标元素用的是class="reveal"，必须改为document.querySelectorAll('.reveal')（类选择器需加.）。

2. 初始状态未触发：页面加载时，.reveal元素默认是透明且偏移的，但此时滚动事件还未触发，导致元素一开始就不可见。需要在页面加载完成后手动调用一次reveal()，判断元素是否在可视区域内并设置对应状态。

修复后的JavaScript代码 #

window.addEventListener('scroll', reveal);
// 页面加载完成后初始化状态
window.addEventListener('load', reveal);

function reveal(){
    var reveals = document.querySelectorAll('.reveal');

    for(var i = 0; i < reveals.length; i++){
        var windowheight = window.innerHeight;
        var revealtop = reveals[i].getBoundingClientRect().top;
        var revealpoint = 150;

        if(revealtop < windowheight - revealpoint){
            reveals[i].classList.add('active');
        }
        else{
            reveals[i].classList.remove('active');
        }
    }
}

性能优化建议 #

滚动事件会频繁触发，可添加防抖函数减少函数执行次数：

function debounce(func, delay = 100) {
    let timeoutId;
    return function() {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(func, delay);
    };
}

window.addEventListener('scroll', debounce(reveal));
window.addEventListener('load', reveal);

function reveal(){
    var reveals = document.querySelectorAll('.reveal');
    for(var i = 0; i < reveals.length; i++){
        var windowheight = window.innerHeight;
        var revealtop = reveals[i].getBoundingClientRect().top;
        var revealpoint = 150;

        if(revealtop < windowheight - revealpoint){
            reveals[i].classList.add('active');
        }
        else{
            reveals[i].classList.remove('active');
        }
    }
}

内容的提问来源于stack exchange，提问作者Softee