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

使用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
鸢尾花序
文章
281
标签
830
分类
133
关注我们
目录
  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. 解释：
    • 最新文章
    知识图谱可视化(Knowledge Graph Visualization)配置部署和使用场景分析
    知识图谱可视化(Knowledge Graph Visualization)配置部署和使用场景分析2024-11-21
    如何让系统环境变量在不重启电脑的情况下立即生效
    如何让系统环境变量在不重启电脑的情况下立即生效2024-11-19
    本地运行Excalidraw项目注意事项
    本地运行Excalidraw项目注意事项2024-11-15
    web页面版块(多列版块)流程间动画实现技术详解和相关方案
    web页面版块(多列版块)流程间动画实现技术详解和相关方案2024-11-12
    使用git管理hexo博客仓库的最佳实践及问题解决
    使用git管理hexo博客仓库的最佳实践及问题解决2024-11-07
    mermaid在markdown编辑器里面常见的写法报错或语法报错(引用块)注意事项和解决办法
    mermaid在markdown编辑器里面常见的写法报错或语法报错(引用块)注意事项和解决办法2024-11-06
    CSS实现鼠标悬浮版块上去边框渐变效果以及版块悬浮边框动画渐变效果
    CSS实现鼠标悬浮版块上去边框渐变效果以及版块悬浮边框动画渐变效果2024-11-05
    使用云服务器搭建WireGuard VPN实现外网访问
    使用云服务器搭建WireGuard VPN实现外网访问2024-11-05
    ©2022 - 2024 By 鸢尾花序
    搜索
    数据库加载中