ScrollMagic滚动动画库：元素视窗显示效果实现详解

纪越岩

于 2025-06-02 09:16:42 发布

阅读量233

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00795/article/details/148377661

ScrollMagic滚动动画库：元素视窗显示效果实现详解

ScrollMagic The javascript library for magical scroll interactions. 项目地址: https://gitcode.com/gh_mirrors/sc/ScrollMagic

什么是ScrollMagic？

ScrollMagic是一个强大的JavaScript库，专门用于创建基于页面滚动的交互效果。它允许开发者精确控制元素在视窗中的显示方式，实现各种炫酷的滚动动画效果。本文将重点分析如何使用ScrollMagic实现元素进入视窗时的显示效果。

基础概念解析

在开始实现之前，我们需要理解几个核心概念：

场景(Scene)：ScrollMagic中的基本单位，定义了动画何时触发以及如何表现
触发器(Trigger)：决定动画何时开始的位置或元素
持续时间(Duration)：动画持续的长度，通常以视窗百分比或像素为单位
触发钩子(TriggerHook)：定义触发器相对于视窗的位置(0-1)

四种实现方式对比

1. 基础显示/隐藏效果

new ScrollMagic.Scene({
    triggerElement: "#trigger1",
    triggerHook: 0.9, // 当元素滚动进入视窗10%时触发
    duration: "80%",  // 在离开视窗前10%时结束(80% + 10%)
    offset: 50        // 将触发器移动到元素中心
})
.setClassToggle("#reveal1", "visible")
.addTo(controller);

技术要点：

使用CSS过渡(transition)实现平滑动画
通过setClassToggle方法在特定时机添加/移除类
duration参数控制元素保持可见的时间

2. 一次性显示效果

new ScrollMagic.Scene({
    triggerElement: "#trigger2",
    triggerHook: 0.9,
    offset: 50,
    reverse: false    // 只执行一次，不反向
})
.setClassToggle("#reveal2", "visible")
.addTo(controller);

技术要点：

reverse: false使效果永久保持
适合用于统计数字、重要信息等只需显示一次的内容
需要刷新页面才能再次看到效果

3. 多元素序列动画

var revealElements = document.getElementsByClassName("digit");
for (var i=0; i<revealElements.length; i++) {
    new ScrollMagic.Scene({
        triggerElement: revealElements[i],
        offset: 50,
        triggerHook: 0.9
    })
    .setClassToggle(revealElements[i], "visible")
    .addTo(controller);
}

技术要点：

循环创建多个场景，每个元素独立控制
通过CSS的:nth-child选择器设置不同的延迟效果
适合列表、时间线等需要依次展示的内容

4. 使用GSAP实现高级动画

var tween = new TimelineMax()
    .from("#gsap-anim", 1.5, {rotationY: 180, scale: 0.7, opacity: 0})
    .to("#gsap-anim", 1.5, {rotationY: 180, scale: 0.7, opacity: 0, delay: 7});

new ScrollMagic.Scene({
    triggerElement: "#gsap-trigger",
    triggerHook: "onEnter",
    duration: "100%",
    offset: 50
})
.setTween(tween)
.addTo(controller);

技术要点：