GSAP ScrollSmoother插件内容区域不支持position:fixed样式属性的替代方案

GSAP的ScrollSmoother插件通过不断更新ScrollSmoother的Content元素translateY值来替换浏览器自身的页面滚动来实现平滑滚动,但这会导致内容区域里的元素使用position:fixed;样式失效。常规的解决方法是把使用了position:fixed;样式的元素放置在ScrollSmoother的wrapper元素外观,但如果有非要把position:fixed;样式元素放置在ScrollSmoot...
Web前端开发 / / 63次阅读

GSAP+ScrollTrigger实现滚动到指定模块固定后滚动鼠标滑动元素

浏览器窗口向下向上滚动到指定模块后,模块固定,滚动鼠标实现该模块内的元素上下滑动。实现原理,在模块内添加一个固定显示元素和一个滑动元素,窗口滚动到它们的父元素时,一个元素固定显示,另一个元素通过滚动鼠标上下滑动。HTML代码:PS:GSAP自行下载。<!--gsap--> <script src="../js/gsap/gsap.min.js"></script> &...
Web前端开发 / / 329次阅读
GSAP+ScrollTrigger实现滚动到指定模块固定后滚动鼠标滑动元素

GSAP+Swiper+Svg实现六等分平面圆形进度条关联文本图片手动自动切换的效果

圆形使用svg代码实现,一个svg背景圆,一个svg进度条圆;进度条使用GSAP的动画操作svg的stroke-dasharray和stroke-dashoffset属性实现,实现思路是一个间隔为一个圆的周长;图片自动轮播切换使用swiper.js插件实现,因为它方法参数多,可以省去不少时间。 实现代码 插件文件: <link rel="stylesheet" type="tex...
Web前端开发 / / 268次阅读
GSAP+Swiper+Svg实现六等分平面圆形进度条关联文本图片手动自动切换的效果

GSAP ScrollSmoother怎么获取滚动的像素和判断滚动的方向

由于ScrollSmoother可能会对滚动事件进行代理或修改,因此直接使用javascript原生的滚动事件监听可能不可靠,但是ScrollSmoother插件本身也没有提供直接获取滚动方向的方法,所以需要自行编写获取代码。通常判断滚动方向的方法是通过比较当前滚动位置和上一次的位置,如果当前值大于上一次则是向下滚动,反之则是向上。但ScrollSmoother可能会对原生的滚动行为进行封装,所以使用ScrollSmoother或Scr...
Web前端开发 / / 312次阅读

GSAP ScrollTrigger对多个相同class类名的元素独立应用滚动触发的动画效果

页面存在多个相同的模块,需要在滚动到各个模块的位置时独立触发该模块的动画效果,实现思路是使用 document.querySelectorAll 获取所有元素获取并通过 forEach 循环遍历元素,然后为每个元素单独创建动画和滚动触发器。示例:为所有 .box .name 元素添加「滚动到元素时淡入」的效果 Html 代码:<div class="box"> <div&nb...
Web前端开发 / / 236次阅读

GSAP动画库实现无缝无限滚动跑马灯效果

网页图片跑马灯滚动效果的需求:均速无限滚动,无缝衔接滚动,鼠标悬浮暂停滚动,鼠标移动恢复滚动,可以向左或向右滚动。实现原理,利用gsap参数x和repeat。效果如下:HTML代码:<div class="gallery"> <ul id="marquee"> <li> <a href=""...
Web前端开发 / / 623次阅读
GSAP动画库实现无缝无限滚动跑马灯效果

GSAP参数的箭头函数的运用方法和示例

(参数) => { 函数体 }是ES6中引入的特性,叫箭头函数,一种简洁的函数定义方式,在GSAP中利用箭头函数,可以实现更多变化的动画。 箭头函数有两种基本语法,分别是 (参数) => { 函数体 } (参数) => 表达式 示例: //一般函数 function add(a, b){ return a + b; } //箭头函数 const add = (a,...
Web前端开发 / / 380次阅读