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

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/[email protected]/dist/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/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("使用动画的元素"，{元素起始状态}，{元素结束状态}) });

常用属性

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-fileAOS - Animate on scroll libraryhttps://michalsnik.github.io/aos/

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

CDN(JS):<script src="[https://unpkg.com/[email protected]/dist/aos.js](https://unpkg.com/[email protected]/dist/aos.js)"></script> CDN(CSS):<link href="[https://unpkg.com/[email protected]/dist/aos.css](https://unpkg.com/[email protected]/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 > </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/homeLottie Air | Remove Watermark - Free Lottie Editorhttps://lottieair.com/可添加关键帧自定义动画，并导出JSON文件在web端使用

CDN:

CDN:<script src="[https://unpkg.com/[email protected]/build/player/lottie.min.js](https://unpkg.com/[email protected]/build/player/lottie.min.js)"></script>

HTML代码

<div></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> <div> <!-- 轮播卡片 --> <div>Slide 1</div> <div>Slide 2</div> <div>Slide 3</div> ... </div> <!-- 分页器--> <div></div> <!-- 上下按钮--> <div></div> <div></div> <!-- 滚动条 --> <div></div> </div>

CSS代码控制分页器

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

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

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+"%"; } }