膜拜!用最少的代码却实现了最牛逼的滚动动画!

这篇具有很好参考价值的文章主要介绍了膜拜!用最少的代码却实现了最牛逼的滚动动画!。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

大家好,我是程序视点的小二哥!今天小二哥带领大家学习如何使用最少的代码创建令人叹为观止的滚动动画~

在聊ScrollTrigger插件之前我们先简单了解下GSAP

GreenSock 动画平台 (GSAP) 可为 JavaScript 可以操作的任何内容(CSS 属性、SVG、React、画布、通用对象等)动画化,并解决不同浏览器上存在的兼容问题,而且比 jQuery快 20 倍。大约1000万个网站和许多主要品牌都在使用GSAP。

接下来小二哥带领大家一起学习ScrollTrigger插件的使用。

插件简介

ScrollTrigger是基于GSAP实现的一款高性能页面滚动触发HTML元素动画的插件。通过ScrollTrigger使用最少的代码创建令人叹为观止的滚动动画。我们需要知道ScrollTrigger是基于GSAP实现的插件,ScrollTrigger是处理滚动事件的,而真正处理动画是GSAP,二者组合使用才能实现滚动动画~

插件特点

  • 将任何动画链接到特定元素,以便它仅在视图中显示该元素时才执行该动画。
  • 可以在进入/离开定义的区域或将其直接链接到滚动栏时在动画上执行操作(播放、暂停、恢复、重新启动、反转、完成、重置)。
  • 延迟动画和滚动条之间的同步。
  • 根据速度捕捉动画中的进度值。
  • 嵌入滚动直接触发到任何 GSAP 动画(包括时间线)或创建独立实例,并利用丰富的回调系统做任何您想做的事。
  • 高级固定功能可以在某些滚动位置之间锁定一个元素。
  • 灵活定义滚动位置。
  • 支持垂直或水平滚动。
  • 丰富的回调系统。
  • 当窗口调整大小时,自动重新计算位置。
  • 在开发过程中启用视觉标记,以准确查看开始/结束/触发点的位置。
  • 在滚动记录器处于活动状态时,如将active类添加到触发元素中:toggleClass: "active"
  • 使用 matchMedia() 标准媒体查询为各种屏幕尺寸创建不同的设置。
  • 自定义滚动触发器容器,可以定义一个 div 而不一定是浏览器视口。
  • 高度优化以实现最大性能。
  • 插件大约只有6.5kb大小。

安装

CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>  

ES Modules

import { gsap } from "gsap";  
import { ScrollTrigger } from "gsap/ScrollTrigger";  
  
gsap.registerPlugin(ScrollTrigger);  

UMD/CommonJS

import { gsap } from "gsap/dist/gsap";  
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";  
  
gsap.registerPlugin(ScrollTrigger);  
  

简单示例

gsap.to(".box", {  
  scrollTrigger: ".box", // start the animation when ".box" enters the viewport (once)  
  x: 500  
});  

高级示例

let tl = gsap.timeline({  
    // 添加到整个时间线   
    scrollTrigger: {  
      trigger: ".container",  
      pin: true,   // 在执行时固定触发器元素  
      start: "top top", // 当触发器的顶部碰到视口的顶部时  
      end: "+=500", // 在滚动 500 px后结束  
      scrub: 1, // 触发器1秒后跟上滚动条  
      snap: {  
        snapTo: "labels", // 捕捉时间线中最近的标签  
        duration: {min: 0.2, max: 3}, // 捕捉动画应至少为 0.2 秒,但不超过 3 秒(由速度决定)   
        delay: 0.2, // 从上次滚动事件开始等待 0.2 秒,然后再进行捕捉   
        ease: "power1.inOut" // 捕捉动画的过度时间(默认为“power3”)   
      }  
    }  
  });  
  
// 向时间线添加动画和标签   
tl.addLabel("start")  
  .from(".box p", {scale: 0.3, rotation:45, autoAlpha: 0})  
  .addLabel("color")  
  .from(".box", {backgroundColor: "#28a92b"})  
  .addLabel("spin")  
  .to(".box", {rotation: 360})  
  .addLabel("end");  

自定义示例

ScrollTrigger.create({  
  trigger: "#id",  
  start: "top top",  
  endTrigger: "#otherID",  
  end: "bottom 50%+=100px",  
  onToggle: self => console.log("toggled, isActive:", self.isActive),  
  onUpdate: self => {  
    console.log("progress:", self.progress.toFixed(3), "direction:", self.direction, "velocity", self.getVelocity());  
  }  
});  

接下来,我们一起来看使用ScrollTrigger可以实现什么样的效果吧~

效果演示

膜拜!用最少的代码却实现了最牛逼的滚动动画!
膜拜!用最少的代码却实现了最牛逼的滚动动画!
膜拜!用最少的代码却实现了最牛逼的滚动动画!
膜拜!用最少的代码却实现了最牛逼的滚动动画!
膜拜!用最少的代码却实现了最牛逼的滚动动画!

利用ScrollTrigger可以实现很多炫酷的效果,还有更多示例及源代码,欢迎查阅官网哦~文章来源地址https://www.toymoban.com/news/detail-624500.html

到了这里,关于膜拜!用最少的代码却实现了最牛逼的滚动动画!的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 盘盘那些牛逼的勒索病毒(附样本)

    给大家盘盘前些年的比较牛的勒索病毒吧。(挑几个有代表性的)顺便送一份样本给你们。 威胁等级:三级 TeslaCrypt,它能够对文档进行AES加密。这个恶意软件似乎是由以前的Cryptowall进行改编的,能够针对不同的防火墙或者软杀进行变异。这个恶意软件很有趣,它会更具不同

    2024年02月13日
    浏览(58)
  • StableStudio,比Midjourney还牛逼的绘画平台,免费!

    大家好,我是鸟哥。 之前给大家推荐过Midjourney和Bluewillow两个AI绘画平台:简直了!比Midjourney更刺激,还免费!Midjourney功能超级强大,但比较傲娇,很贵,是否让用户免费体验要看心情;Bluewillow免费,但质量稍微差了一点。 今天呢,再给大家推荐一个AI绘图平台——StableS

    2024年02月09日
    浏览(47)
  • 7个CICD工具大比拼,谁最牛逼

    Devops的盛行推动着CI/CD工具的快速发展,除了传统的CI工具,也出现了很多新兴的CI/CD框架,这些框架各有优缺点,究竟该如何选择,在特定场景下谁更强、更合适呢? 本文列举了Jenkins、Travis CI、Circle CI、TeamCity、Codeship、Gitlab CI、Bamboo共7个目前市场上最常见的CI/CD工具,做整

    2024年02月07日
    浏览(53)
  • 【 一个比 ping 更强大、更牛逼的命令行工具!】

    遇到网络故障的时候,你一般会最先使用哪条命令进行排障? 除了Ping,还有Traceroute、Show、Telnet又或是Clear、Debug等等。 今天安排的,是Traceroute命令详解,还有经典排障案例哈。 Traceroute 原理和功能 traceroute是一个常用的Linux网络诊断命令,用于追踪数据包从源主机到目标主

    2024年02月06日
    浏览(49)
  • 牛逼的python库-使用FuzzyWuzzy库进行模糊字符串匹配

    FuzzyWuzzy是一个Python库,用于模糊字符串匹配和字符串相似度计算。它基于Levenshtein距离算法,用于比较两个字符串之间的差异。 下面是FuzzyWuzzy库的一些常见用法: 导入库和模块: 使用 fuzz.ratio 计算两个字符串之间的相似度: 这会计算出两个字符串之间的相似度百分比。 使

    2024年02月12日
    浏览(40)
  • 带你深入了解spark(重生之最牛逼最详细版)

    Spark 是当今大数据领域最活跃、最热门、最高效的大数据通用计算平台之一。 spark官网:Apache Spark™ - Unified Engine for large-scale data analytics  spark概述 第一阶段:Spark最初由美国加州伯克利大学( UC Berkelcy)的AMP实验室于2009年开发,是基于内存计算的大数据并行计算框架,可用于

    2024年04月14日
    浏览(36)
  • 教你成为比卡卡西还牛逼的全能忍者,全拷贝与分割函数

     如何成为一个集雷切,写轮眼侦查和拷贝与一身的卡卡西,下面教你! 目录  第一式——雷切!  strtok 第二式——写轮眼侦查! strerror函数 第三式——写轮眼拷贝! memcpy  模拟实现memcpy函数   😎博客昵称:陈大大陈 😊座右铭:所谓觉悟,就是在漆黑的荒野上开辟出一条

    2024年01月19日
    浏览(40)
  • 一个超级牛逼的消息推送系统Gotify 使用Gotify来搭建你的消息推送系统

    目录 先看效果 简介 1.1创建目录 3.访问服务端 3.1示例 3.2创建应用 4.安装apk 4.1下载apk 4.2安装 4.3配置服务器地址 5.推送消息测试 5.1服务器执行 5.2手机端查看 支持删除 6.源码地址  打开应用 gotify 支持的功能如下 可以通过 restapi 发送消息 可以通过 websocket 接收消息 可以管理用

    2024年01月17日
    浏览(38)
  • 这个牛逼的Python模块,能让你轻松模拟并记录键盘操作(附零基础学习资料)

    模拟键盘操作执行自动化任务,我们常用的有 pyautowin 等自动化操作模块。但是这些模块有一个很大的缺点,编译的时候非常依赖 windows 的C语言底层模块。 (文末送福利) 今天介绍的这个模块叫做 keyboard 它有一个最大的优点:纯Python原生开发,编译时完全不需要依赖C语言模

    2024年02月13日
    浏览(44)
  • 作为一名程序员,如何写出一手让同事膜拜的漂亮代码?

    整洁的代码 有意义的命名 函数命名 变量命名 函数的定义 注释的规范 代码的长度 代码的对齐 我写代码已经有好几年了,最近看了一本书叫做《代码整洁之道》。我发现这本书中介绍的一些内容对我来说非常有启发性。书中提到的一些方法和技巧让我重新审视了自己的代码

    2024年02月02日
    浏览(61)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包