Elementor 实现首页第 0 屏（Opening Screen）动画效果

WoodMart + Elementor 实现首页第 0 屏（Opening Screen）动画效果

很多高端品牌网站（如 Apple、Tesla、Nike 等）都会在首页加入一个 Opening Screen（第 0 屏），用户首次进入网站时，先看到一段品牌展示动画，而不是直接进入首页内容。

随着用户向下滚动，第 0 屏会自动收起并从页面中移除，同时网站 Header 平滑显示。整个过程只执行一次，即使用户再滚回顶部，第 0 屏也不会再次出现。

最终效果

• 首次打开首页，显示第 0 屏（品牌 Logo、视频或动画）。
• WoodMart Header 默认隐藏。
• 当 Hero 区域即将到达顶部时，第 0 屏自动收起。
• Header 同时淡入显示。
• 第 0 屏从 DOM 中删除，不再占用页面资源。
• 之后无论用户如何滚动，第 0 屏都不会再次出现。

页面结构

首先，在首页 Hero 上方新增一个 Section，作为 Opening Screen。

<section id="intro-screen">
    <!-- Logo、视频、动画等内容 -->
</section>

<div id="hero">
    <!-- 原来的首页第一屏 -->
</div>

CSS：隐藏 Header 与第 0 屏动画

默认隐藏 WoodMart Header，并为第 0 屏添加收起动画。

/* Header 默认隐藏 */

.whb-main-header{
    opacity:0;
    visibility:hidden;
    transform:translateY(-20px);
    transition:all .6s cubic-bezier(.22,1,.36,1);
}

/* Header 显示 */

.whb-main-header.header-show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* 第0屏动画 */

#intro-screen{
    transition:
        height .8s cubic-bezier(.22,1,.36,1),
        opacity .6s ease;
}

#intro-screen.remove{
    height:0!important;
    opacity:0;
    overflow:hidden;
}

JavaScript 控制逻辑

监听页面滚动，当 Hero 区域距离顶部约 100px 时，同时执行以下操作：

• 收起第 0 屏。
• Header 淡入显示。
• 800ms 后彻底删除第 0 屏。

为什么使用 window.load？

在 WoodMart + Elementor 中，很多元素会在页面加载完成后才计算最终尺寸，例如：

• Elementor Flex Container
• Lazy Load 图片
• WoodMart Header
• Sticky Header

因此，建议使用 window.load，确保所有元素已经完成布局，再开始监听滚动事件。

为什么使用 getBoundingClientRect()？

相比直接计算滚动高度，getBoundingClientRect() 可以实时获取 Hero 与浏览器顶部的距离。

<script>
window.addEventListener("load", function(){

    const intro = document.getElementById("intro-screen");
    const hero = document.getElementById("hero");
    const header = document.querySelector(".whb-main-header");


    let done=false;


    window.addEventListener("scroll", function(){


        if(done) return;


        let rect = hero.getBoundingClientRect();



        /*
        hero距离顶部还有100px时触发
        */

        if(rect.top < 100){


            done=true;



            // 0屏收起

            if(intro){

                intro.classList.add("remove");


                setTimeout(()=>{

                    intro.remove();

                },800);

            }



            // header出现

            if(header){

                header.classList.add("header-show");

            }


        }



    });



});
</script>

这种方式具有以下优点：

为什么提前 100px 开始动画？

如果等 Hero 完全到达顶部再执行动画，Header 会有轻微跳动感。

提前约 100px 开始动画，可以让：

• Header 更自然地淡入。
• 第 0 屏有足够时间收起。
• 整个页面切换更加顺滑。

如果希望动画更早或更晚触发，只需修改这一行：

if(rect.top < 100)

例如：

• 50：动画更晚开始。
• 150：动画更早开始。
• 200：适合大型 Banner 页面。

性能优化

动画只会执行一次。

intro.remove();

第 0 屏会直接从 DOM 中移除，因此：

• 不会继续占用内存。
• 不会参与页面重绘。
• 不会影响后续滚动性能。
• 整体体验更加流畅。

总结

通过少量 HTML、CSS 和 JavaScript，即可在 WoodMart + Elementor 中实现一个具有品牌感的首页 Opening Screen。

• ✅ 首页增加第 0 屏展示。
• ✅ Header 默认隐藏。
• ✅ Hero 接近顶部时自动切换。
• ✅ Header 平滑显示。
• ✅ 第 0 屏自动销毁，不再出现。
• ✅ 无需修改 WoodMart 主题文件。

这种效果特别适合企业官网、品牌官网、产品展示页、高端制造业网站以及创意作品集网站，能够有效提升首页的视觉冲击力和品牌体验。