使用CSS/JS实现图片视口淡入上移功能遇404错误求助

一、解决404错误 #

404是浏览器找不到图片文件导致的，原因是图片路径不正确：

• 确认lovethyneighbor.jpg和你的HTML文件是否在同一目录，如果图片放在子文件夹（比如images）里，要把src改成src="images/lovethyneighbor.jpg"
• 检查文件名拼写，注意大小写（部分操作系统区分文件名大小写）

二、修复滚动触发动画的逻辑 #

你的JS代码只在页面加载时执行一次判断，没有监听滚动事件，且判断条件错误，无法实现滚动时触发动画。以下是修正后的完整代码：

保留原CSS（无需修改） #

.section3 {
    opacity: 0;
    transform: translateY(20vh);
    visibility: hidden;
    transition: opacity 0.6s ease-out, transform 1.2s ease-out;
    will-change: opacity, visibility;
}
.fade {
    opacity: 1;
    transform: none;
    visibility: visible;
}

修正后的HTML与JS #

<section id="section3" class="section3">
    <img style="width: 100%;" src="lovethyneighbor.jpg"> <!-- 务必确认这里的图片路径正确 -->
</section>

<script>
const section3 = document.getElementById("section3");

// 判断元素是否进入视口的函数
function checkVisibility() {
    const rect = section3.getBoundingClientRect();
    // 当元素顶部进入窗口范围、且底部未完全移出窗口时，判定为可见
    const isVisible = rect.top <= window.innerHeight && rect.bottom >= 0;
    
    if (isVisible) {
        section3.classList.add("fade");
    } else {
        // 若需要元素滚出视口时恢复隐藏状态，保留此行；不需要则删除
        section3.classList.remove("fade");
    }
}

// 页面加载时先检查一次
window.addEventListener("load", checkVisibility);
// 监听滚动事件，每次滚动都检查元素可见性
window.addEventListener("scroll", checkVisibility);
</script>

三、关键修改说明 #

• 原代码仅在页面加载时执行一次判断，没有监听滚动行为，导致滚动时不会触发动画
• 修正了视口判断逻辑：利用getBoundingClientRect()获取元素位置，判断元素是否进入窗口可见范围
• 若不需要元素滚出视口时恢复隐藏效果，可删除else分支里的classList.remove("fade")

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