页面动画和延迟加载动画的实现

引言

在现代网页中，滚动触发动画 已经成为提升页面观感的重要一环。恰到好处的入场动画，不仅能吸引用户注意力，还能让信息呈现更有节奏感。

以莉莉丝游戏（Lilith Games）的 Farlight Games 官网为例 ------ 我们可以看到页面的多个模块在刚好进入视窗时才开始淡入或滑入展示，而不是页面一加载就全部出现👇

以 莉莉丝游戏的farlightGames官网为例：

这种元素露出即动画展示的设计，在前端开发中非常常见，尤其在官网、营销页、品牌页等类型项目中，能够极大提升整体质感。

实现方式

方式一：借助第三方库 Animate.css

如果你希望快速上手、无需编写复杂的动画逻辑，那 Animate.css 是最方便的选择之一。该库封装了大量常用动画（淡入淡出、旋转、弹跳、缩放......），只需引入一份 CSS 即可。

使用方式

将类 animate__animated 添加到元素，以及任何动画名称（不要忘记 animate__ 前缀！）

ini 复制代码

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>

ini 复制代码

<h1 class="animate__animated animate__bounce">An animated element</h1>

具体使用参照 Animate.css官网 animatecss.node.org.cn/

👍 优点

快速实现丰富动画效果
无需 JS，纯 CSS 实现
可与任何框架（Vue/React/原生）搭配使用

👎 缺点

动画种类虽多，但难以完全定制
所有动画都预定义在库中，轻量场景下稍显冗余
不具备"滚动触发"逻辑，需要自行添加触发控制

方式二：手写实现滚动触发动画

如果项目中只需要几个简单动画、希望精简体积或更灵活地控制触发逻辑，那么完全可以"手搓"一套滚动检测方案。

页面按独立的块布局

首先页面按独立的块布局，方便在页面露出的时候添加 class ，当滚动到可视区域内时，给该区块添加 on 类，用于触发动画。

html 复制代码

<div id="pc_container">
    <div class="section1">....</div>    
    <div class="section2">....</div>    
    <div class="section3">....</div>
</div>

判断dom是否漏出

通过js判断dom是否漏出，生成一个可复用的可视区域检测 handler。当 targets 中的元素在 root 的可视区域内达到一定比例时，给它加上 on 类（用于触发动画）。

然后在 on 这个class下添加动画即可

js 复制代码

var aniTimer = null;
function createInViewHandler ({ root, targets, threshold }) {
    var $root = $(root);
    var $targets = $(targets);
    var threshold = (threshold == null ? 0.15 : threshold);

    function handler () {
        if (aniTimer) return;
        aniTimer = setTimeout(function () {
            if (!$root.length) { aniTimer = null; return; }

            var rootRect = $root.get(0).getBoundingClientRect();

            $targets.not('.on').each(function () {
                var rect = this.getBoundingClientRect();
                var interTop = Math.max(rect.top, rootRect.top);
                var interBottom = Math.min(rect.bottom, rootRect.bottom);
                var interHeight = interBottom - interTop;
                var ratio = interHeight / rect.height;

                if (interHeight > 0 && ratio >= threshold) {
                    $(this).addClass('on');
                }
            });

            if ($targets.not('.on').length === 0) {
                $root.off('scroll.inview', handler);
                $(window).off('resize.inview', handler);
            }
            aniTimer = null;
        }, 50);
    }
    return handler;
}



// 动画懒触发（只触发一次）
var inViewHandler = createInViewHandler({
    root: '#pc_container',
    targets: '.kv, .feature, .part3, .part4, .part5',
    threshold: 0.15
});
inViewHandler(); // 首次检查
$('#pc_container').on('scroll', inViewHandler);
$(window).on('resize', inViewHandler);

添加css动画

css 复制代码

.section1 .title {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}

.section1.on .title {
  opacity: 1;
  transform: translateY(0);
}

通过简单的过渡动画，就能实现淡入 + 上移入场的效果。也可以根据需要扩展更多 CSS 动画属性（如 scale、rotate、blur 等）。

总结

方案	优点	适用场景
Animate.css	简单快速，动画丰富	设计稿动画较多、追求开发效率
手写方案	灵活、轻量、可定制	动画类型有限、追求性能或精细控制

✨ 无论采用哪种方式，核心理念都是一样的： "在正确的时间，让元素出现。"