avatar
文章
649
标签
2112
分类
180
开发
  • 大前端
  • 人工智能
  • 小程序
  • 桌面应用
  • 游戏开发
服务器&网络
  • 服务器
  • 网络
归档
标签
友链
联系我们
仰观苍穹思环宇
开发
  • 大前端
  • 人工智能
  • 小程序
  • 桌面应用
  • 游戏开发
服务器&网络
  • 服务器
  • 网络
归档
标签
友链
联系我们

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

发表于2024-09-02|更新于2026-09-12|大前端gsap
gsapGSAP钉住效果ScrollTrigger固定动画滚动触发钉住元素放大与固定pinend
cover of previous post
上一篇
浏览器通过console调试动画方法(浏览器开发者工具在线调试js代码和css在线代码)
cover of next post
下一篇
如何在网页中根据不同版块的附加类自定义鼠标指针样式(cursor自定义风格)
相关推荐
cover
2025-08-08
GSAP与ScrollTrigger高级交互设计:鼠标滚动实现多图分离合拢与单图位移动画的模块化实现与性能优化
cover
2024-08-09
GSAP动画实现和ScrollTrigger应用指南从基础到高级效果
cover
2026-01-30
PC版使用GSAP实现滚动固定展开动画手机版使用原生轮播结构的高复用响应式交互方案详解
cover
2024-07-12
WordPress上集成GSAP这个强大的JavaScript动画库
cover
2024-07-25
gsap速查表汉化版参考手册
cover
2025-07-04
使用GSAP构建慢慢进入爬升不是突然蹦上来的抽屉式滚动动画(优雅顺滑的内容过渡动画):逐帧控制的视口级固定结构实践
avatar
鸢尾花序
文章
649
标签
2112
分类
180
联系我们
目录
  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. 解释：
    • 最新文章
    Hexo静态博客添加联系表单:用Google Apps Script实现邮件直达
    Hexo静态博客添加联系表单:用Google Apps Script实现邮件直达2026-09-17
    白手起家没有资源的人如何通过资源整合一步步突破认知并打通合作路径的完整分析
    白手起家没有资源的人如何通过资源整合一步步突破认知并打通合作路径的完整分析2026-09-15
    独立站定位四步法服务谁、解决什么、凭什么是你、怎么赚钱——WordPress独立站从模糊定位到清晰战略的完整框架
    独立站定位四步法服务谁、解决什么、凭什么是你、怎么赚钱——WordPress独立站从模糊定位到清晰战略的完整框架2026-09-15
    Duplicator全量迁移WordPress后HTTPS挂了正确做法是只换wp-content并在duplicator部署网站的时候1Panel里把数据库host填成mysql而不是localhost
    Duplicator全量迁移WordPress后HTTPS挂了正确做法是只换wp-content并在duplicator部署网站的时候1Panel里把数据库host填成mysql而不是localhost2026-09-15
    多设备Hexo安装Butterfly主题里面博客search.xml过大导致GitHub推送失败的完整解决方案(含交互式清理脚本)
    多设备Hexo安装Butterfly主题里面博客search.xml过大导致GitHub推送失败的完整解决方案(含交互式清理脚本)2026-09-14
    告别逐个转换用md2pdf一键批量把Markdown变成PDF
    告别逐个转换用md2pdf一键批量把Markdown变成PDF2026-09-14
    Hexo+Butterfly主题search.xml过大导致GitHub推送失败之完整排查与解决SOP
    Hexo+Butterfly主题search.xml过大导致GitHub推送失败之完整排查与解决SOP2026-09-14
    用Python批量给Hexo文章自动补齐TDK：DeepSeek驱动、严格YAML、动态备份的完整实践
    用Python批量给Hexo文章自动补齐TDK：DeepSeek驱动、严格YAML、动态备份的完整实践2026-09-12
    ©2022 - 2026 By 鸢尾花序