c 做网站简单吗,phpstorm网站开发,泉州建设培训中心网站,电商资源网GSAP动画库#xff0c;探究苹果官网页面滚动动画是如何实现的
前言
每次浏览苹果官网时都在好奇#xff0c;当我们向下滚动页面时一个个文字或图片总能缓缓浮现#xff0c;往上滚动时又能慢慢收起来#xff0c;这就究竟是如是实现的呢。在查阅一些资料时发现了Scrollmagi…GSAP动画库探究苹果官网页面滚动动画是如何实现的
前言
每次浏览苹果官网时都在好奇当我们向下滚动页面时一个个文字或图片总能缓缓浮现往上滚动时又能慢慢收起来这就究竟是如是实现的呢。在查阅一些资料时发现了Scrollmagic.js插件,该插件提供了灵活的滚动动画可以自定义各种各样的效果但是当我满怀信心的决定大干一场时发现这个插件已经很久没有维护更新了而且是基于jquery开发的在引入vue3脚手架时并不适配有感兴趣的小伙伴可以去看官网http://scrollmagic.io/docs/index.html。最终我发现了一个很强大的动画库GSAP如官网首页所说的animate anything,它拥有着各种强大的动画能力官网地址https://gsap.com/。本文主要对其中的一个plugin ScrollTrigger进行简单demo讲解。实现效果如下
如何使用
1、首先需要安装gsap包建议安装最新版
yarn add gsap //或 npm install gsap2、写几个简单的滚动模板
templatesection classsection flex-center column blue normal refheaderdiv classboxbox/divdiv classboxbox/divdiv classboxbox/div/sectiondiv classsection flex-center column normal reftopdiv classboxbox/divdiv classboxbox/divdiv classboxbox/div/divdiv classsection flex-center column refmaindiv classboxbox/divdiv classboxbox/divdiv classboxbox/div/divsection classsection flex-center orange column refbottom div classboxbox/divdiv classboxbox/divdiv classboxbox/div/section
/template3、引入GSAP以及ScrollTrigger插件并注册插件
import gsap from gsap;
import { ScrollTrigger } from gsap/ScrollTrigger;
gsap.registerPlugin(ScrollTrigger);4、创建动画,配置动画移动的始末位置以及触发动画的位置动画的node节点等参数
const headerref();ctx gsap.context((self:any) {const boxes self.selector(.box);boxes.forEach((box:any) {gsap.to(box, {x: 300,scrollTrigger: {trigger: box,start: top 40%,end: 500,scrub: true,},});});}, header.value);
更多配置
ScrollTrigger的主要配置可以参考下面的代码
containerAnimation触发由垂直滚动控制的“水平”滚动部分内的动画end确定ScrollTrigger的结束位置endTrigger在正常文档流中的位置用于计算ScrollTrigger结束的位置fastScrollEnd它将强制完成当前ScrollTrigger的动画,避免在用户快速滚动时重叠动画horizontal使用水平滚动onRefresh当刷新发生时的回调通常是一个resize事件它强制ScrollTrigger重新计算它的所有位置onToggle当ScrollTrigger从非活动切换到活动时的回调scrub允许您在用户停止滚动后捕捉到某些进度值start确定ScrollTrigger的起始位置toggleActions将在进入时播放动画在离开时暂停动画在再次向后进入时恢复动画并在滚动到起点后重置回退到起点。您可以为每个操作使用以下任何关键字“播放”、“暂停”、“恢复”、“重置”、“重新启动”、“完成”、“反转”和“无”toggleClass当ScrollTrigger切换活动/非活动时向一个元素或多个元素添加/删除一个类
最后
ScrollTrigger只是GSAP中的一个插件更多的动画效果还在学习中感兴趣的小伙伴可以直接去官网学习查看使用这个库能减少很多我们手写css动画的苦恼有需要的小伙伴可直接访问本文demo地址https://gitee.com/fcli/scroll-trigger.git
