avatar
文章
291
标签
863
分类
134
开发
  • 大前端
  • 人工智能
  • 小程序
  • 桌面应用
  • 游戏开发
服务器&网络
  • 服务器
  • 网络
归档
标签
仰观苍穹思环宇
搜索
开发
  • 大前端
  • 人工智能
  • 小程序
  • 桌面应用
  • 游戏开发
服务器&网络
  • 服务器
  • 网络
归档
标签

使用GSAP实现滚动动画效果之版块固定动画(多个版块固定pin住&钉住的效果)

发表于2024-09-02|更新于2024-11-07|大前端gsap
gsapGSAP钉住效果ScrollTrigger固定动画滚动触发钉住元素放大与固定pinend
cover of previous post
上一篇
浏览器通过console调试动画方法(浏览器开发者工具在线调试js代码和css在线代码)
cover of next post
下一篇
如何在网页中根据不同版块的附加类自定义鼠标指针样式(cursor自定义风格)
相关推荐
cover
2024-08-09
GSAP动画实现和ScrollTrigger应用指南从基础到高级效果
cover
2024-07-12
WordPress上集成GSAP这个强大的JavaScript动画库
cover
2024-07-25
gsap速查表汉化版参考手册
cover
2024-08-13
如何在WordPress中阻止第三方库或者代码(以gsap为例)在移动设备上执行
cover
2024-08-14
实现GSAP动画在手机端仅当存在class为test版块时,对class版块里面的版块class为neirgong_weg区域并向左偏移150px,同时动态更新maskPosition,结合mask-image实现复杂的特效示例
avatar
鸢尾花序
文章
291
标签
863
分类
134
关注我们
目录
  1. 1. 如何使用 GSAP 实现元素固定在页面中？
  2. 2. 为什么 .box 元素不能被固定住？
  3. 3. 如何确保在滚动时，后面的版块不会立刻顶上来？
  4. 4. 如何在滚动时放大 .box 内的 .ggg 元素？
  5. 5. 如何让 .box 固定住，且在继续滚动时 .ggg 放大？
  6. 6. 如何实现每个版块进入视口中间位置时才开始放大效果？
  7. 7. 如何延长 .box 的固定时间？
  • 使用 GSAP 和 ScrollTrigger 根据视口宽度执行动画
    1. 1. 1. GSAP 和 ScrollTrigger 介绍
    2. 2. 2. 需求描述
    3. 3. 3. 实现步骤
      1. 3.1. 3.1. HTML 结构
      2. 3.2. 3.2. 判断视口宽度和元素存在
    4. 4. 4. 代码解释
      1. 4.1. 4.1 GSAP 动画参数
      2. 4.2. 4.2 ScrollTrigger 插件的参数
    5. 5. 5. 优化和兼容性
      1. 5.1. 5.1 添加窗口调整监听器
      2. 5.2. 5.2 处理移动设备
    6. 6. 6. 总结
  • 有的时候会有报错：Uncaught ReferenceError: gsap is not defined
    1. 0.1. 解释：
    • 最新文章
    如何实现打字与旋转飞入效果：一步一步指导
    如何实现打字与旋转飞入效果：一步一步指导2024-12-06
    如何实现一个逐字显示的动态打字效果，并保持原始文字不受影响
    如何实现一个逐字显示的动态打字效果，并保持原始文字不受影响2024-12-06
    如何在WordPress使用WooCommerce添加Buy Now按钮并直接跳转到结算页面
    如何在WordPress使用WooCommerce添加Buy Now按钮并直接跳转到结算页面2024-12-04
    SVG 动态环形背景效果实现与应用场景分析
    SVG 动态环形背景效果实现与应用场景分析2024-12-03
    前端开发与后端数据分析展示的完整解决方案(Vis-Network和Networks的选择)
    前端开发与后端数据分析展示的完整解决方案(Vis-Network和Networks的选择)2024-12-03
    颜色切换效果实现——CMYK背景色切换思路
    颜色切换效果实现——CMYK背景色切换思路2024-12-03
    实现周期性背景渐变滚动效果的HTML和CSS代码
    实现周期性背景渐变滚动效果的HTML和CSS代码2024-12-03
    设置wordpress网站文件和文件夹的权限
    设置wordpress网站文件和文件夹的权限2024-12-03
    ©2022 - 2024 By 鸢尾花序
    搜索
    数据库加载中