前端相关动画库(GSAP/Lottie/Swiper/AOS)

本文介绍了多个前端动画库的使用方法。GSAP提供ScrollTrigger实现滚动触发动画，支持固定元素、进度控制等功能；SplitText可实现文字分割动画效果。AOS库用于页面滚动时的元素入场动画，支持多种动画类型。Lottie用于展示JSON格式的矢量动画，支持交互控制。Swiper实现响应式轮播图，包括3D效果和分页控制。FontAwesome提供丰富的图标字体，可通过CSS类切换不同状态

琦臻^

1712人浏览 · 2026-01-17 20:00:51

琦臻^ · 2026-01-17 20:00:51 发布

GSAP的ScrollTrigger和SplitText动画

resources | GSAP | Docs & Learninghttps://gsap.com/resources/GSAP Showcasehttps://gsap.com/showcase/GSAP on CodePenhttps://codepen.io/GreenSockGSAP在CodePen中的千种Demo

CDN:

<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/gsap.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/ScrollTrigger.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/SplitText.min.js"></script>

ScrollTrigger部分用法

gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.create({
  trigger: '.pic', //用选择器选择触发元素
  start: 'top top', //元素到达视口的最上方开始
  //start: 'top 80%', //元素到达视口的80%开始
  end: '+=2000', //往下移动2000px结束
  scrub: true, //与滚动条绑定在一起，实现往返
  markers: true,//开启标注
  pin:true,//固定页面不岁滚动条滚动(关键)
  pinSpaceing:true//自动根据end属性添加的距离创建空白，使得上下两个页面衔接介绍https://codepen.io/JasonDuquain/pen/oNxvWjJ
  // 添加动画
  animation:
  gsap.timeline()//使用时间线，用于管理多个动画的先后顺序，">"表示上一个动画结束开始，"<"是与上一个动画一起开始
  .fromTo(".pic4", { width: "18.75em" }, { width: "16.75em" }, ">")
  .fromTo(".pic1", { left: "55.125em" }, { left: "14.3em" }, "<")
	 //fromTo("使用动画的元素"，{元素起始状态}，{元素结束状态})
});

常用属性

属性	取值	说明
start	数字	方位名词
end	数字	方位名词
trigger	Element	undefined
animation	Tween	Timeline
scrub	布尔值	数字
toggleClass	字符串	对象
markers	true	开启标注功能（更好看滚动开始以及截止的地方）
scroller	Element	window
pin	Element	undefined
direction	数字	反映滚动的每时每刻方向，其中 1 表示向前， -1 表示向后
isActive	布尔值	如果滚动位置位于 ScrollTrigger 实例的开始位置和结束位置之间，则仅 true
horizontal	布尔型	设置使用水平滚动，则只需设置 `horizontal: true`
progress	数字	ScrollTrigger 实例的总体进度，其中 0 在开头，0.5 在中间，1 在末尾

SplitText文字分割动画

gsap.registerPlugin(SplitText, ScrollTrigger);//注册插件
document.fonts.ready.then(() => {
gsap.set(".split", { opacity: 1 }); //快速设置所有 .split 元素的初始透明度为 1
const splitElements = document.querySelectorAll(".split");//获取页面中所有带有 .split 类的 DOM 元素
  splitElements.forEach((element)=>{//遍历每一个容器
    SplitText.create(element, {
        type: "words,lines", // 拆分类型：同时拆分为「单词」和「行」
        mask: "lines", // 以「行」为掩码（限制），保证拆分后的单词不会超出所在行的范围
        onSplit: (self) => { // 文字拆分完成后的回调函数（关键）
        // 拆分完成后，为所有拆分出的单词创建动画
        gsap.from(self.words, {
            duration: 1.3, // 动画持续时间：1.3秒
            y: 50, // 初始位置：在目标位置下方 50px 处（y 轴正方向为向下）
            opacity: 0, // 初始透明度：完全透明
            stagger:{ //  stagger：逐元素延迟动画，营造层次感
                amount:0.6 // 所有单词完成动画的总延迟时间：0.6秒（平均分配给每个单词）
            },
            scrollTrigger: { // 绑定滚动触发配置
            trigger: element, // 滚动触发的目标元素：当前遍历的 .split 元素
            start: "top 88%", // 动画开始触发时机：元素的「顶部」与视口的「88% 高度位置」重合时
            end: "top 20%", // 动画结束时机：元素的「顶部」与视口的「20% 高度位置」重合时
            }
        });
        }
    });
})
});

AOS动画

https://github.com/michalsnik/aos?tab=readme-ov-filehttps://github.com/michalsnik/aos?tab=readme-ov-file AOS - Animate on scroll libraryhttps://michalsnik.github.io/aos/

用途：新页面出现时的动画效果(滚轮)

CDN(JS):<script src="[https://unpkg.com/aos@2.3.1/dist/aos.js](https://unpkg.com/aos@2.3.1/dist/aos.js)"></script>

CDN(CSS):<link href="[https://unpkg.com/aos@2.3.1/dist/aos.css](https://unpkg.com/aos@2.3.1/dist/aos.css)" rel="stylesheet">

JS代码

AOS.init({         // 初始化AOS
		offset: 120,   // 提前120px触发动画
		delay: 0,      // 无默认延迟
		duration: 400, // 动画默认持续400ms
		easing: 'ease', // 默认缓动曲线
		once: false,    // 支持重复触发动画
		mirror: false,  // 滚动离开不执行反向动画
		anchorPlacement: 'top-bottom' // 元素顶部对齐视口底部时触发
});

HTML代码（AOS使用方法）

  //直接在对应元素添加对应的类名即可，类名对应动画参考连接https://michalsnik.github.io/aos/
  <div
    data-aos="fade-up"
    data-aos-offset="200"
    data-aos-delay="50"
    data-aos-duration="1000"
    data-aos-easing="ease-in-out"
    data-aos-mirror="true"
    data-aos-once="false"
    data-aos-anchor-placement="top-center"
  >
  </div>

Lottie动画

LottieFiles: Download Free lightweight animations for website & apps.https://lottiefiles.com/lottielab.com/dashboard/team/4c9411da-7606-4370-a845-c313fbd6acf2/homehttps://www.lottielab.com/dashboard/team/4c9411da-7606-4370-a845-c313fbd6acf2/home Lottie Air | Remove Watermark - Free Lottie Editorhttps://lottieair.com/可添加关键帧自定义动画，并导出JSON文件在web端使用

CDN:

CDN:<script src="[https://unpkg.com/lottie-web@5.12.2/build/player/lottie.min.js](https://unpkg.com/lottie-web@5.12.2/build/player/lottie.min.js)"></script>

HTML代码

<div id="struct_picture"></div>//自定义容器选择器名，设置显示动画的容器

JS代码

显示动画

//获取显示动画的容器
const structe_one_container = document.getElementById('struct_picture');
// 加载并渲染动画
const structe_one_animation = lottie.loadAnimation({
    container: structe_one_container, // 动画挂载的 DOM 容器（必填）
    renderer: 'svg',                  // 渲染模式（支持 'svg'/'canvas'/'html'）
    loop: false,                      // 是否循环播放（布尔值/数字，数字表示循环次数）
    autoplay: false,                  // 是否自动播放（布尔值）
    path: 'structe_one.json',         // Lottie 动画 JSON 文件路径（相对/绝对）
});

设置触发时间

    // 监听页面滚动，滚动到目标区域时播放动画
    window.addEventListener('scroll', () => {
    const rect = structe_one_container.getBoundingClientRect();//关键是获取放置容器的元素的矩形属性
    // 当动画容器进入视口（顶部 <= 窗口高度）时播放
    if (rect.top <= window.innerHeight/1.5 && !structe_one_animation.isPlaying) {
        structe_one_animation.play(); //播放动画
    }
    });

Swiper轮播图

swiperjs.com/demoshttps://swiperjs.com/demos

CDN(JS): <script src="[https://unpkg.com/swiper@8/swiper-bundle.min.js](https://unpkg.com/swiper@8/swiper-bundle.min.js)"></script>
CDN(CSS):<link rel="stylesheet" href="[https://unpkg.com/swiper@8/swiper-bundle.min.css](https://unpkg.com/swiper@8/swiper-bundle.min.css)" />

HTML代码（类名要正确）

<div class="swiper">
  <div class="swiper-wrapper">
    <!-- 轮播卡片 -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- 分页器-->
  <div class="swiper-pagination"></div>

  <!-- 上下按钮-->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- 滚动条 -->
  <div class="swiper-scrollbar"></div>
</div>

CSS代码控制分页器

.swiper-pagination-bullet background-color: #fff;：未选中的小圆点背景色：白色

.swiper-pagination-bullet-active background-color: #00E77F;：选中的小圆点背景色：青绿色（活力绿）

JS代码

普通轮播效果

var swiper = new Swiper(".course-slider", {//指定那个类名设置swiper属性
  spaceBetween: 20,                       // 轮播卡片之间的间距：20px（对应 CSS 的 gap，避免卡片重叠）
  grabCursor:true,                        // 鼠标交互：光标移到轮播上时变成“抓手样式”，提示可拖动
  loop:true,                              // 循环轮播：滑到最后一张后，继续滑动会回到第一张（无边界）
  pagination: {                           // 分页器（小圆点）配置
    el: ".swiper-pagination",             // 分页器绑定的 DOM 元素（页面中需有这个类名的元素）
    clickable: true,                      // 分页器小圆点可点击，点击直接跳转到对应幻灯片
  },
  breakpoints: {
    540: {                                // 屏幕宽度 ≥540px 时
      slidesPerView: 1,                   // 每页显示1张卡片
    },
    768: {                                // 屏幕宽度 ≥768px 时
      slidesPerView: 2,                   // 每页显示2张卡片
    },
    1024: {                               // 屏幕宽度 ≥1024px 时
      slidesPerView: 3,                   // 每页显示3张卡片
    },
  },
});

3D轮播效果

var swiper = new Swiper(".home-slider", { //初始化 Swiper 实例，绑定到类名为 .home-slider 的容器
  effect: "coverflow",     // 核心特效：封面流（Coverflow），模拟3D翻页/相册效果
  grabCursor: true,        // 交互优化：鼠标移到轮播上显示“抓手光标”，提示可拖动
  centeredSlides: true,    // 居中显示：当前激活的幻灯片始终在容器正中间（核心适配 coverflow 特效）
  slidesPerView: "auto",   // 幻灯片数量：自动适配（根据屏幕宽度/幻灯片宽度自动调整显示数量）								   
  coverflowEffect: {       // Coverflow 特效的精细配置（核心！控制3D效果的参数）
    rotate: 0,             // 幻灯片旋转角度（0=不旋转，正数=顺时针，负数=逆时针）
    stretch: 0,            // 幻灯片拉伸距离（0=不拉伸，越大越紧凑）
    depth: 100,            // 3D深度（越大，远的幻灯片越靠后，3D效果越明显）
    modifier: 2,           // 效果强度乘数（放大 rotate/stretch/depth 的效果）
    slideShadows: true     // 是否显示幻灯片的阴影（增强3D层次感）
  },									  
  loop:true,               // 循环轮播：滑到最后一张后无缝回到第一张
  autoplay:{
    delay: 3000,               // 自动切换间隔：3秒（3000毫秒）
    disableOnInteraction:false // 用户手动滑动后，仍继续自动轮播（默认true会停止）
  }
});

3D轮播效果(左右拖动图片与类别显示)

var lastActiveIndex = swiper2.activeIndex; //处于中心位置是的轮播图索引，用于判断拖动的左右方向
swiper2.on('slideChange', function() { //绑定 slideChange 事件,页面轮播时出发事件
  var activeIndex = swiper2.activeIndex;
  var activeSlide = swiper2.slides[activeIndex];
  var currentImage = activeSlide.querySelector('img');
  let num = currentImage.id;
  //减一对应数组0索引
  var current = document.getElementsByClassName("spc")[num[1]-1];
  //左滑动并清空上一个
  if(num[1]-2!=-1 && activeIndex > lastActiveIndex){
    var prev = document.getElementsByClassName("spc")[num[1]-2];
    prev.style.color = "black";
    prev.style.backgroundColor="white"
  }
  else{//划到第一个清空最后一个
    var prev = document.getElementsByClassName("spc")[5]
    prev.style.color = "black";
    prev.style.backgroundColor="white"
  }
  //右滑动并清空上一个
 if(num[1]!=6 && activeIndex < lastActiveIndex){
    var prev = document.getElementsByClassName("spc")[num[1]];
    prev.style.color = "black";
    prev.style.backgroundColor="white"
  }
  else{//划到最后一个清空第一个
    var prev = document.getElementsByClassName("spc")[0]
    prev.style.color = "black";
    prev.style.backgroundColor="white"
  }
  lastActiveIndex = activeIndex; //存储上一个轮播图的索引，用于判断拖动方向
  current.style.color = "white"; 
  current.style.backgroundColor="black"
});

Font-awesome图标字体工具

Font Awesomehttps://fontawesome.com/首页 - FontAwesome 字体图标中文Iconhttps://fontawesome.com.cn/

CDN：需在官网设置

CDN:<link rel="stylesheet" href="[https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css](https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css)" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

用法：直接在html当中嵌入对应的<i></i>标签即可（可用font-size调整大小）
JS添加active类切换图标

let num_s = 0;
sound.onclick = () =>{
  num_s+=1;
  if(num_s%2==0){//音量图标
    sound_icon.classList.remove('fa-volume-xmark')
    sound_icon.classList.add('fa-volume-high')
    video.muted = false;
    sbar.style.width=(video.volume * 100)+"%";
  }
  else{//静音图标
    sound_icon.classList.remove('fa-volume-high')
    sound_icon.classList.add('fa-volume-xmark')
    video.muted = true;
    sbar.style.width=0+"%";
  }

}