本文主要是介绍gsap timeline示例-实现滚动切换手机颜色，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
前言
最近使用gsap有点上瘾。看过一个手机官网滚动切换手机颜色的效果，初次见还是很炫。所以呢，就去研究了下，发现也不过如此。我们现在使用gsap来实现它。
首先来看最终效果：
gsap timeline示例-实现滚动切换手机颜色
实现原理
1. 首先整个dom结构被分为两个部分：背景及其文案、手机图片
2. 通过绝对定位让三个背景、三张图片分别重叠，保证元素在同一位置
3. 通过切换不同组的高度来展示不同的背景与图片
思路有了，那就来实现它
实现步骤
DOM结构
<section class="change-color bg-black relative overflow-hidden h-screen"><div class="images absolute w-full h-screen z-10"><div class="image orange h-full w-1/2 absolute overflow-hidden left-1/3 top-0"><figure style="background-image: url(https://photographer-files.s3.us-east-2.amazonaws.com/orange.png);"></figure></div><div class="image blue h-0 w-1/2 absolute overflow-hidden left-1/3 top-0"><figure style="background-image: url(https://photographer-files.s3.us-east-2.amazonaws.com/blue.png);"></figure></div><div class="image black h-0 w-1/2 absolute overflow-hidden left-1/3 top-0"><figure style="background-image: url(https://photographer-files.s3.us-east-2.amazonaws.com/black.png);"></figure></div></div><div class="background absolute w-full h-screen"><div class="text-box orange absolute overflow-hidden bg-orange-300 h-full w-1/2"><div class="text absolute h-screen left-1/2 top-0 flex items-center" style="transform: translate(-50%, 0)"><strong class="text-orange-500 text-9xl font-bold">Orange</strong></div></div><div class="text-box blue absolute overflow-hidden bg-blue-200 h-0 w-1/2"><div class="text absolute h-screen left-1/2 top-0 flex items-center" style="transform: translate(-50%, 0)"><strong class="text-blue-900 text-9xl font-bold">Blue</strong></div></div><div class="text-box black absolute overflow-hidden bg-gray-700 h-0 w-1/2 "><div class="text absolute h-screen left-1/2 top-0 flex items-center" style="transform: translate(-50%, 0)"><strong class="text-gray-900 text-9xl font-bold">Black</strong></div></div></div></section>
tips: 使用tailwind，具体样式应该一看class就能看懂
需要注意
- 图片使用的是背景而不是img，因为图片会根据高度变化而变化；
- 除了第一组橙色，其他两组初始高度都为0；
- 需要通过z-index来控制层级，这样能够在动画时不至于调整上一组的高度。
图片增加了一点样式：
.change-color figure{width: 461px;height: 604px;transform: translate(0, 20%);
}
现在我们就能通过控制台调整高度实现一定的效果了：
动画实现
首先我们要清楚，我们需要两组动画
一组用来固定整个结构
一组用来实现高度变化
// 用来固定const section = document.querySelector(".change-color");gsap.to(section, {scrollTrigger: {trigger: section,start: "top top",end: "300% top",pin: true,//markers: true,}});
使用gsap.timeline来执行高度变化的动画：
const imgBlue = section.querySelector('.image.blue');const imgBlack = section.querySelector('.image.black');const textBlue = section.querySelector('.text-box.blue');const textBlack = section.querySelector('.text-box.black');// 创建一个时间线，还是使用section作为触发器const tl = gsap.timeline({scrollTrigger: {trigger: section,start: "top top",end: "300% top",scrub: true // 是否重复执行，这个能保证我们向上滚动时让动画反着执行}});/*** .to() 表示目标属性变化到什么状态* [textBlue, imgBlue, ...] 表示同时执行textBlue、imgBlue* { height: '100%', ... } 表示目标最终的状态* .to().to() 表示执行完前一个动画后执行下一个* */ tl.to([textBlue, imgBlue], { height: '100%' }).to([textBlack, imgBlack], { height: '100%' });
注意点
我们两个动画的
end属性的第一个值都是300%，是单个组元素高度的三倍，是因为我们需要在滚动的时候保证高度变化的高度与滚动距离一致。当然也可以是其他值，更详细的属性解释，可以参照苹果官网动画解析之airpods滚动光影效果。
这样，我们的主要功能就全部实现了，但总感觉有点死板，那不如浅浅的再加一个进入的动画：
初始化动画
const imgOrange = section.querySelector('.image.orange');gsap.from(imgOrange, { x: 800,transform: 'scale(0.8)',duration: 1.4,opacity: 0,ease: "expo.out",scrollTrigger: {trigger: section,start: "top top+=50%", // 这个保证只要元素进入页面，就能执行动画// markers: true,}})
这里使用
from表示目标元素从配置的属性恢复到我们css控制的初始状态
从这里也能看出来gsap创建动画的便利性
这样当页面进入的时候手机图片就会从右边想左移动的一个动画，同时也会变化透明度跟缩放比例。
完整代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"><title>GSAP+TIMELINE</title>
</head>
<body><main class="bg-slate-300 animate-demo "><!-- 这个是用来占位的，不知道为什么，前面必须要有一个有高度的元素才能实现滚动的功能 --><section style="height: 1px;" class="bg-black"></section><section class="change-color bg-black relative overflow-hidden h-screen"><div class="images absolute w-full h-screen z-10"><div class="image orange h-full w-1/2 absolute overflow-hidden left-1/3 top-0"><figure style="background-image: url(https://photographer-files.s3.us-east-2.amazonaws.com/orange.png);"></figure></div><div class="image blue h-0 w-1/2 absolute overflow-hidden left-1/3 top-0"><figure style="background-image: url(https://photographer-files.s3.us-east-2.amazonaws.com/blue.png);"></figure></div><div class="image black h-0 w-1/2 absolute overflow-hidden left-1/3 top-0"><figure style="background-image: url(https://photographer-files.s3.us-east-2.amazonaws.com/black.png);"></figure></div></div><div class="background absolute w-full h-screen"><div class="text-box orange absolute overflow-hidden bg-orange-300 h-full w-1/2"><div class="text absolute h-screen left-1/2 top-0 flex items-center" style="transform: translate(-50%, 0)"><strong class="text-orange-500 text-9xl font-bold">Orange</strong></div></div><div class="text-box blue absolute overflow-hidden bg-blue-200 h-0 w-1/2"><div class="text absolute h-screen left-1/2 top-0 flex items-center" style="transform: translate(-50%, 0)"><strong class="text-blue-900 text-9xl font-bold">Blue</strong></div></div><div class="text-box black absolute overflow-hidden bg-gray-700 h-0 w-1/2 "><div class="text absolute h-screen left-1/2 top-0 flex items-center" style="transform: translate(-50%, 0)"><strong class="text-gray-900 text-9xl font-bold">Black</strong></div></div></div></section></main><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/ScrollTrigger.min.js"></script><script>function ready(fn) {if (document.readyState !== 'loading') {fn();} else {document.addEventListener('DOMContentLoaded', fn);}}function changeColor() { const section = document.querySelector(".change-color");const imgOrange = section.querySelector('.image.orange');const imgBlue = section.querySelector('.image.blue');const imgBlack = section.querySelector('.image.black');const textBlue = section.querySelector('.text-box.blue');const textBlack = section.querySelector('.text-box.black');gsap.to(section, {scrollTrigger: {trigger: section,start: "top top",end: "300% top",pin: true,//markers: true,}});gsap.from(imgOrange, { x: 800,transform: 'scale(0.8)',duration: 1.4,opacity: 0,ease: "expo.out",scrollTrigger: {trigger: section,start: "top top+=50%",// markers: true,}})const tl = gsap.timeline({scrollTrigger: {trigger: section,start: "top top",end: "300% top",scrub: true}});/*** .to() 表示目标属性变化到什么状态* [textBlue, imgBlue, ...] 表示同时执行textBlue、imgBlue* { height: '100%', ... } 表示目标最终的状态* .to().to() 表示执行完前一个动画后执行下一个* */tl.to([textBlue, imgBlue], { height: '100%' }).to([textBlack, imgBlack], { height: '100%' });}function init() { gsap.registerPlugin(ScrollTrigger);changeColor();}ready(init);</script>
</body>
</html>
拿去就能跑，你可以试试~
写在最后
感谢你的阅读，如果你觉得有用，欢迎评论、点赞、转发~
当然也希望你能关注我的公众号：前端大乱炖
这篇关于gsap timeline示例-实现滚动切换手机颜色的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
