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

最新推荐文章于 2024-03-27 09:56:42 发布
最新推荐文章于 2024-03-27 09:56:42 发布
阅读量597 收藏 10
点赞数 9
分类专栏： 动画 文章标签： gsap动画 gsap timeline
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanyi24/article/details/135628946
版权

前言

最近使用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>

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

写在最后

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

yanyi24
关注
  • 9
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
nTimeline.js:GSAP - 用于配置时间轴动画控制器 UI 的插件
07-17
时间线.js GSAP - 用于配置时间轴动画控制器 UI 的插件 由于画面构成和插件都是用ajax加载的，本地测试时使用chrome。 查看 演示 ＃截屏 在网页中添加#Setup jquery、GSAP、nTimeline.js < script type =" text/javascript " src =" ./js/jquery-1.8.3.min.js " > </ script > < script type =" text/javascript " src =" ./js/TweenMax.min.js " > </ script > < script type =" text/javascript " src =" ./nTimeline/nTimeline.js " > </ script > ＃方法 window.nTimeline.init // 실
gsap-react-transition-group
02-12
gsap-react-transition-group
使用GSAP写出令人惊叹的动画！
Daniel900516的博客
01-23 1128
GSAP实现动画
练习动画最好的方式：用GSAP实现可滚动和可拖动的时间轴
前端仙人的博客
08-27 3705
Greensock 动画库的 ScrollTrigger 和 Draggable 插件可以帮助我们创建一些非常酷的响应用户交互的效果。在本教程中，我们将了解如何将它们一起使用，以创建一个可滚动和可拖动的交互式时间轴。我们将建立一个时间轴，显示周董的发行的专辑。我们时间轴的主题并不重要——主要是在多个日期发生的一系列事件——所以随意选择你自己的主题，让它对你来说更个性化！我们的网页顶部有一个时间轴，显示我们的日期，以及一些全角部分，我们每个日期的内容都将在其中存在。...
gsap时间线timeline及power1.out/power1.in效果 dome
最新发布
threedeformity的博客
03-27 346
gsap.timeline方法使用，及power1.out/power1.in效果。// 双击屏幕暂停动画。
GSAP-Delivery-Truck
05-24
:gear: GSAP样板 该项目用作Booost的“ GSAP”课程中任务的样板。 它使用webpack开发服务器初始化基础应用程序。 包括： :package: 通过Webpack捆绑 可用命令 命令 描述 npm install 安装项目依赖项 npm start 生成项目并打开运行Web服务器的项目 npm run build 使用生产设置（最小化，丑化等）构建代码包。 编写代码 克隆存储库后，从项目目录运行npm install 。 然后，您可以通过运行npm start来启动本地开发服务器。 使用npm start开发服务器后，您可以编辑src文件夹中的任何文件，并且webpack将自动重新编译并重新加载服务器（默认情况下位于http://localhost:8080 ）。 码林特 Eslint用于确保统一的代码库。 可以根据需要随意编辑.eslintrc.json的配置。 要运行lint并
GSAP使用详解
qq_59456579的博客
05-25 3518
其中，target是要动画的元素，可以是DOM元素、对象或数组；gsap.fromTo()方法用于创建一个Tween动画，将元素从一个状态过渡到另一个状态，可以自定义初始状态和结束状态。这段代码将会创建一个时间轴，先让element1沿着x轴移动200像素，再让element2沿着y轴移动200像素，持续时间为1秒。gsap.from()方法用于创建一个Tween动画，将元素从一个状态过渡到另一个状态，但是是从初始状态开始的。其中，target是要动画的元素，可以是DOM元素、对象或数组；
JS 流行库（十一）：GSAP
0lonely0
10-11 1624
JS 流行库（十一）：GSAP
GSAP从入门到精通
changbb的专栏
07-12 6008
经常能看到很多网站，随着页面滚动条向下滑动时，有非常丰富的页面动画效果；相信很多小伙伴也都很好奇，这样的网站效果是如何做出来的。我们本文就来深入的学习一下GSAP这个库的用法，为后面实现酷炫的动画效果打下基础。首先这样的滚动效果和fullpage.js、Swiper.js全屏翻页滚动轮播的效果是不一样的，页面元素的位置极度的依赖于滚动条的位置，因此是需要监听滚动条事件；
gsap学习笔记
关注前端，关注原创
11-10 1734
1.gsap时间轴 var tl = gsap.timeline(); //调用时间轴对象 //#green为动画操作对象，第二个参数{}为动画效果，addLabel定义一个时间轴上的节点， //后面的to方法基于这个节点做动画 tl.to("#green", {x:750, duration:1}) .addLabel("blueGreenSpin", "+=1") .to("#blue", {x:750, rotation:360, duration:2}, "blueGreenSpin")
css动画gsap 时间线 TimeLine
yuzheh521的博客
06-27 189
Timeline Max.js -- GSAP脚本动画工具
10-11
延伸TimelineLite，提供完全相同的功能，加上有用（但非必要）的功能，如repeat，repeatDelay，yoyo，currentLabel（）等等。再次，就像TweenMax对TweenLite一样，TimelineMax旨在成为终极的全功能工具，而不是轻量级的。 在我资源的页还有关于GSAP系列的其他脚本动画工具
Timeline Lite.js -- GSAP脚本动画之一
10-11
timelinelite.js是一个功能强大，轻便的排序工具，它​​像一个容器一样用于补间，使得它们整体控制起来很简单，并精确地管理彼此之间的时间。您甚至可以根据需要将时间轴嵌入其他时间轴。这允许您轻松地模块化您的动画工作流程。 在我的资源页还有GSAP系列其他的TweenMax.js , TweenLite.js , TimelineMax.js的资源分享给大家
gsap-flip-react:在React App中使用GSAP Flip插件的简单示例
05-22
GSAP Flip＆React 描述 使用GSAP的Flip插件使用React创建Flex过滤应用程序的简单示例。 GSAP论坛 现场样本 GSAP Flip插件 作者 罗德里戈·赫南多（Rodrigo Hernando）
nuxt-gsap-module:Nuxt.js的GSAP模块
05-01
Nuxt GSAP模块 Nuxt.js的GSAP模块 特征 帮助您集成GSAP javascript动画库 允许您通过自定义v-gsap指令轻松为元素设置动画 :fire: 通过this.$gsap方法提供全球使用的解决方案this.$gsap 激活后自动注册插件 支持Club GreenSock高级插件 Zero-config设置已准备就绪 :rocket: 快速开始 将nuxt-gsap-module依赖项添加到您的项目中 $ npm install --save-dev nuxt-gsap-module # or yarn add --dev nuxt-gsap-module 添加nuxt-gsap-module的buildModules的部分nuxt.config.js // nuxt.config.js export default { buildModules : [ 'nuxt-gsap
GSAP-SMOOTH-SCROLL:训练平滑滚动插件gsap
05-27
GSAP平滑滚动 Latihan平滑滚动插件gsap 您可以克隆或下载此存储库，然后在代码编辑器中打开并在浏览器上运行Enjoy！
react-gsap:React用于GSAP的组件
04-09
如果需要完全控制，则可以通过对底层对象的低级别访问来实现。 除此之外，它还提供了一些GSAP插件和有用的帮助程序组件。 从版本2开始，它是为GSAP 3构建的，并且仅将gsap作为对等依赖项。 通过这种方式，你可以...
这个库让你轻松搞定复杂动画！
程序员成长指北
04-12 767
大厂技术高级前端Node进阶 点击上方程序员成长指北，关注公众号 回复1，加入高级Node交流群我们在网上浏览时，经常能看到很多网站，随着页面滚动条向下滑动时，有非常丰富的页面动画效果；相信很多小伙伴也都很好奇，这样的网站效果是如何做出来的。我们本文就来深入的学习一下GSAP这个库的用法，为后面实现酷炫的动画效果打下基础。首先这样的滚动效果和fullpage.js、Swiper.js全屏...
gsap实现横向滚动 代码示例加注释
02-21
可以使用 GSAP 的 TweenMax 来实现横向滚动，具体代码如下：TweenMax.to('#element', 1, { x: '100px', // 滚动 100px ease: Linear.easeNone // 匀速移动 });

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yanyi24

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值