gsap timeline示例-实现滚动切换手机颜色

2024-01-16 19:52
文章标签 实现 手机 切换 示例 颜色 滚动 timeline gsap

本文主要是介绍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>

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

写在最后

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

这篇关于gsap timeline示例-实现滚动切换手机颜色的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/613718。

相关文章

使用Python实现在Word中添加或删除超链接

使用Python实现在Word中添加或删除超链接

《使用Python实现在Word中添加或删除超链接》在Word文档中,超链接是一种将文本或图像连接到其他文档、网页或同一文档中不同部分的功能,本文将为大家介绍一下Python如何实现在Word中添加或... 在Word文档中，超链接是一种将文本或图像连接到其他文档、网页或同一文档中不同部分的功能。通过添加超
阅读更多...
windos server2022里的DFS配置的实现

windos server2022里的DFS配置的实现

《windosserver2022里的DFS配置的实现》DFS是WindowsServer操作系统提供的一种功能,用于在多台服务器上集中管理共享文件夹和文件的分布式存储解决方案,本文就来介绍一下wi... 目录什么是DFS？优势：应用场景：DFS配置步骤什么是DFS？DFS指的是分布式文件系统（Distr
阅读更多...
NFS实现多服务器文件的共享的方法步骤

NFS实现多服务器文件的共享的方法步骤

《NFS实现多服务器文件的共享的方法步骤》NFS允许网络中的计算机之间共享资源,客户端可以透明地读写远端NFS服务器上的文件,本文就来介绍一下NFS实现多服务器文件的共享的方法步骤,感兴趣的可以了解一... 目录一、简介二、部署1、准备1、服务端和客户端：安装nfs-utils2、服务端：创建共享目录3、服
阅读更多...
IDEA如何切换数据库版本mysql5或mysql8

IDEA如何切换数据库版本mysql5或mysql8

《IDEA如何切换数据库版本mysql5或mysql8》本文介绍了如何将IntelliJIDEA从MySQL5切换到MySQL8的详细步骤,包括下载MySQL8、安装、配置、停止旧服务、启动新服务以及... 目录问题描述解决方案第一步第二步第三步第四步第五步总结问题描述最近想开发一个新应用，想使用mysq
阅读更多...
C#使用yield关键字实现提升迭代性能与效率

C#使用yield关键字实现提升迭代性能与效率

《C#使用yield关键字实现提升迭代性能与效率》yield关键字在C#中简化了数据迭代的方式,实现了按需生成数据,自动维护迭代状态,本文主要来聊聊如何使用yield关键字实现提升迭代性能与效率,感兴... 目录前言传统迭代和yield迭代方式对比yield延迟加载按需获取数据yield break显式示迭
阅读更多...
Python实现高效地读写大型文件

Python实现高效地读写大型文件

《Python实现高效地读写大型文件》Python如何读写的是大型文件,有没有什么方法来提高效率呢,这篇文章就来和大家聊聊如何在Python中高效地读写大型文件,需要的可以了解下... 目录一、逐行读取大型文件二、分块读取大型文件三、使用 mmap 模块进行内存映射文件操作（适用于大文件）四、使用 pand
阅读更多...
python实现pdf转word和excel的示例代码

python实现pdf转word和excel的示例代码

《python实现pdf转word和excel的示例代码》本文主要介绍了python实现pdf转word和excel的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录一、引言二、python编程1，PDF转Word2，PDF转Excel三、前端页面效果展示总结一
阅读更多...
在MyBatis的XML映射文件中＜trim＞元素所有场景下的完整使用示例代码

在MyBatis的XML映射文件中＜trim＞元素所有场景下的完整使用示例代码

《在MyBatis的XML映射文件中＜trim＞元素所有场景下的完整使用示例代码》在MyBatis的XML映射文件中,trim元素用于动态添加SQL语句的一部分,处理前缀、后缀及多余的逗号或连接符,示... 在MyBATis的XML映射文件中，<trim>元素用于动态地添加SQL语句的一部分，例如SET或W
阅读更多...
Python xmltodict实现简化XML数据处理

Python xmltodict实现简化XML数据处理

《Pythonxmltodict实现简化XML数据处理》Python社区为提供了xmltodict库,它专为简化XML与Python数据结构的转换而设计,本文主要来为大家介绍一下如何使用xmltod... 目录一、引言二、XMLtodict介绍设计理念适用场景三、功能参数与属性1、parse函数2、unpa
阅读更多...
C#实现获得某个枚举的所有名称

C#实现获得某个枚举的所有名称

《C#实现获得某个枚举的所有名称》这篇文章主要为大家详细介绍了C#如何实现获得某个枚举的所有名称,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考一下... C#中获得某个枚举的所有名称using System;using System.Collections.Generic;usi
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2