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就能看懂

需要注意

  1. 图片使用的是背景而不是img，因为图片会根据高度变化而变化；
  2. 除了第一组橙色，其他两组初始高度都为0；
  3. 需要通过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>

拿去就能跑，你可以试试~

写在最后

感谢你的阅读，如果你觉得有用，欢迎评论、点赞、转发~
当然也希望你能关注我的公众号：前端大乱炖
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/627541.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

这10个技巧你都会？绝对算网络抓包高手！

这10个技巧你都会？绝对算网络抓包高手！

中午好&#xff0c;我的网工朋友。抓包工具Wireshark大家都知道&#xff0c;它可以截获和分析网络数据封包&#xff0c;检测网络上的问题&#xff0c;比如网络延迟、数据丢失、拥堵等&#xff0c;以及评估网络性能。 当网络里发现恶意攻击、某人下载流量过大、设备互联丢包、协…
阅读更多...
C#微信公众号HIS预约挂号系统源码

C#微信公众号HIS预约挂号系统源码

微信公众号预约挂号系统、支付宝小程序预约挂号系统主要是让自费、医保患者在手机上就能实现就医全过程&#xff0c;实时预约挂号、自费、医保结算&#xff0c;同时还可以查询检查检验报告等就诊信息&#xff0c;真正实现了让信息“多跑路”&#xff0c;让群众“少跑腿”。系统…
阅读更多...
NXP采用RS RTS测试系统，验证28纳米RFCMOS雷达单芯片 |百能云芯

NXP采用RS RTS测试系统，验证28纳米RFCMOS雷达单芯片 |百能云芯

Rohde & Schwarz的雷达目标模拟器R&S RTS&#xff0c;作为汽车雷达的颠覆性解决方案&#xff0c;尤其是其能够电子模拟非常近距离物体的能力&#xff0c;已被用于验证NXP半导体的下一代雷达传感器参考设计的性能。 这一合作使汽车行业在汽车雷达的发展上迈出了一步&…
阅读更多...
python热重载调试神器Reloadium,Debug工具用print太慢了

python热重载调试神器Reloadium,Debug工具用print太慢了

作为程序员&#xff0c;我们都深知调试&#xff08;Debug&#xff09;在编程过程中的重要性。然而&#xff0c;使用传统的"print"语句进行调试可能效率较低&#xff0c;今天&#xff0c;笔者将推荐一款独具一格的Python调试工具——Reloadium。Reloadium为IDE添加了热…
阅读更多...
ChatGPT vs 文心一言: 两大AI助手的较量

ChatGPT vs 文心一言: 两大AI助手的较量

文章目录 每日一句正能量前言ChatGPTChatGPT的优点ChatGPT的劣势 文心一言文心一言的优势文心一言的劣势 后记 每日一句正能量 无所不能的人实在一无所能&#xff0c;无所不专的专家实在是一无所专。 前言 随着人工智能技术的发展&#xff0c;ChatGPT和文心一言已成为广受欢迎…
阅读更多...
Linux命令之pwd,cd,ls,cat,more,less,head,tail文件目录类命令的使用

Linux命令之pwd,cd,ls,cat,more,less,head,tail文件目录类命令的使用

一、实验题 在桌面打开终端&#xff0c;查看当前目录 改变目录位置至当前目录的父目录 改变目录位置至用户的家目录 利用绝对路径改变目录到/usr/local目录下 列出当前目录下的文件及目录 列出包括以“.”开始的隐藏文件在内的所有文件 列出当前目录下所有文件的权限、所有者、…
阅读更多...
Go后端开发 -- 面向对象特征：结构体 继承 多态 interface

Go后端开发 -- 面向对象特征：结构体 继承 多态 interface

Go后端开发 – 面向对象特征&#xff1a;结构体 && 继承 && 多态 && interface 文章目录 Go后端开发 -- 面向对象特征&#xff1a;结构体 && 继承 && 多态 && interface一、Go的结构体1.结构体的声明和定义2.结构体传参 二、将…
阅读更多...
简易机器学习笔记（十一）opencv 简易使用-人脸识别、分类任务

简易机器学习笔记（十一）opencv 简易使用-人脸识别、分类任务

前言 前段时间摸了下机器学习&#xff0c;然后我发现其实openCV还是一个很浩瀚的库的&#xff0c;现在也正在写一篇有关yolo的博客&#xff0c;不过感觉理论偏多&#xff0c;所以在学yolo之前先摸一下opencv&#xff0c;简单先写个项目感受感受opencv。 流程 openCV实际上已…
阅读更多...
Go interface基础

Go interface基础

接口类型是对其它类型行为的概括与抽象。通过使用接口&#xff0c;我们可以写出更加灵活和通用的函数&#xff0c;这些函数不用绑定在一个特定的类型实现上。 很多面向对象的语言都有接口这个概念&#xff0c;Go 语言的接口的独特之处在于它是隐式实现。换句话说&#xff0c;对…
阅读更多...
maven导入无法拉取所需依赖

maven导入无法拉取所需依赖

maven导入无法拉取所需依赖 1.原因2.解决搞定收工&#xff01; 1.原因 公司使用的是gradle&#xff0c;配置的私有云&#xff0c;maven里面配置私有云完全使用不了&#xff0c;无论配置国内还是国外的&#xff0c;导入的项目报错拉不到jar包。 <mirror><id>mirro…
阅读更多...
Dhcp中继ensp

Dhcp中继ensp

拓扑图 <Huawei>system-view [Huawei]sysname SW1 [SW1]vlan batch 10 20 [SW1]int e0/0/1 #配置access接口 [SW1-Ethernet0/0/1]port link-type access [SW1-Ethernet0/0/1]port default vlan 10 [SW1-Etherne…
阅读更多...
[C#]利用paddleocr进行表格识别

[C#]利用paddleocr进行表格识别

【官方框架地址】 https://github.com/PaddlePaddle/PaddleOCR.git 【算法介绍】 PaddleOCR表格识别是PaddlePaddle开源项目中的一个强大功能&#xff0c;它利用深度学习技术实现了对各类表格的高精度识别。PaddleOCR表格识别能够处理各种复杂的表格&#xff0c;包括但不限于…
阅读更多...
【语音助手】语音识别框架的简单介绍

【语音助手】语音识别框架的简单介绍

文章目录 ASR 框架常见的ASR框架用于嵌入式领域的ASR框架 NLP 框架常用NLP框架用于嵌入式领域的NLP框架 TTS 框架常见的TTS 框架用于嵌入式领域的TTS 框架 ASR&#xff1a;语音识别&#xff08;ASR&#xff09;是一种将语音信号转换为文本的技术。NLP&#xff1a;自然语言处理。…
阅读更多...
cartopy，一个非常好用的 Python 库！

cartopy，一个非常好用的 Python 库！

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 大家好&#xff0c;今天为大家分享一个非常好用的 Python 库 - cartopy。 Github地址&#xff1a;https://github.com/SciTools/cartopy 地图数据可视化在许多领域中都是至关重要的&#xff0c;无论是用于气象学…
阅读更多...
IDEA2023的激活与安装（全网最靠谱，最快捷的方式）

IDEA2023的激活与安装（全网最靠谱，最快捷的方式）

前言&#xff1a; 相信很多小伙伴已经开始了java的学习之旅&#xff0c;想要更快乐的学习当然少不了IDEA这个得力的开发工具软件。但是IDEA是付费的&#xff0c;免费版功能有太少&#xff0c;怎么才能既免费&#xff0c;又能使用上正式版呢&#xff01;当然还是激活啦&#xf…
阅读更多...
json 读取中文、保存为中文的json文件

json 读取中文、保存为中文的json文件

pycharm 打开的json文件 通过代码读取中文文件 保存中文的json文件&#xff1a; import jsonwith open(garbage_classification.json,encodingutf-8-sig,moder) as f:data json.load(f) # print(data) {0: 可回收物_金属食品罐, 1: 其他垃圾_PE塑料袋, 2: 其他垃圾_污损塑…
阅读更多...
设备树下Led驱动实验-向设备树文件添加Led设备节点

设备树下Led驱动实验-向设备树文件添加Led设备节点

一. 简介 前面简单学习了设备树文件的内容&#xff0c;语法&#xff0c;以及如何向设备树文件中添加设备节点信息。学习了驱动开发时&#xff0c;会使用到的设备树常用OF操作函数。本文我们就开始第一个基于设备树的 Linux 驱动实验-LED驱动实现。 本文具体学习在设备树文件添…
阅读更多...
vlc播放rtsp视频流

vlc播放rtsp视频流

简单记录一下项目中用到的浏览器内嵌vlc播放rtsp视频流 首先使用object标签&#xff0c;关于object标签的介绍&#xff0c;放一张图 页面设置 <object class"vlc-box" ref"vlc" type"application/x-vlc-plugin"windowless"true"pl…
阅读更多...
yum仓库和nfs

yum仓库和nfs

目录 一、yum 1.1.yum概述 1.2.yum实现过程 1.3.yum配置文件 1.4.仓库设置文件/etc/yum.repos.d/*.repo 1.5.yum命令 二、NFS 2.1.NFS介绍 2.2.NFS特点 2.3.NFS优势 2.4.NFS原理 2.5.NFS共享存储服务 一、yum 1.1.yum概述 基于RPM包构建的软件更新机制 可以自动…
阅读更多...
推荐三个非常好用的视频转文字工具

推荐三个非常好用的视频转文字工具

在处理视频文件时&#xff0c;有时我们需要将视频中的语音内容转换为文字形式&#xff0c;以便于整理、编辑或搜索。传统的视频转文字方法往往需要耗费大量时间和人力&#xff0c;而且准确度难以保证。现在&#xff0c;有了水印云等视频转文字神器&#xff0c;我们可以快速、准…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023