- 综合排序
- 最热优先
- 最新优先
- 来自专栏友儿
gsap+ScrollTrigger，打造震撼滚差视觉！
<script src="gsap.min.js"></script> <script src="<em>ScrollTrigger</em>.min.js"></script> <script sourceMappingURL=style.css.map */ 代码js const sections = document.querySelectorAll('section'); gsap.registerPlugin(ScrollTrigger backgroundPositionY: `${window.innerHeight / 2}px`, ease: 'none', scrollTrigger gsap.registerPlugin(ScrollTrigger)：注册 ScrollTrigger 插件，以便在后续代码中使用其功能。 scrollTrigger 对象中设置触发元素为当前循环的
元素，以及 scrub: true 表示动画跟随滚动实时进行。 1.5K10编辑于 2024-08-14 - 来自专栏前端实验室
膜拜！用最少的代码却实现了最牛逼的滚动动画！
接下来小师妹带领大家一起学习ScrollTrigger插件的使用。 插件简介 ScrollTrigger是基于GSAP实现的一款高性能页面滚动触发HTML元素动画的插件。 通过ScrollTrigger使用最少的代码创建令人叹为观止的滚动动画。 我们需要知道ScrollTrigger是基于GSAP实现的插件，ScrollTrigger是处理滚动事件的，而真正处理动画是GSAP，二者组合使用才能实现滚动动画~ 插件特点 将任何动画链接到特定元素， "></script> ES Modules import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger ScrollTrigger } from "gsap/dist/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); 简单示例 gsap.to(
3.8K20编辑于 2022-12-02 - 来自专栏前端实验室
膜拜！用最少的代码却实现了最牛逼的滚动动画！
接下来大师兄带领大家一起学习ScrollTrigger插件的使用。插件简介ScrollTrigger是基于GSAP实现的一款高性能页面滚动触发HTML元素动画的插件。 通过ScrollTrigger使用最少的代码创建令人叹为观止的滚动动画。 我们需要知道ScrollTrigger是基于GSAP实现的插件，ScrollTrigger是处理滚动事件的，而真正处理动画是GSAP，二者组合使用才能实现滚动动画~插件特点将任何动画链接到特定元素，以便它仅在视图中显示该元素时才执行该动画 (ScrollTrigger);UMD/CommonJSimport { gsap } from "gsap/dist/gsap";import { ScrollTrigger } from "gsap /dist/ScrollTrigger";gsap.registerPlugin(ScrollTrigger);简单示例gsap.to(".box", { scrollTrigger: ".box",
4.1K00编辑于 2022-11-27 - 来自专栏云开发小程序1
压轴css——苹果百万级别滚动页面特效
initial-scale=1.0"> <title>苹果官网特效</title> <script src="/JS/gsap.min.js"></script> <script src="/JS/<em>ScrollTrigger</em>.min.js window.addEventListener('scroll', scrollHandler) // 滚动时固定位置 gsap.registerPlugin(<em>ScrollTrigger</em> 触发动画的元素 在滚动时可以保持不向上滚动，让整个容器在滚动时固定 gsap.to("#container", { opacity: 1, scrollTrigger
1.3K51编辑于 2023-10-14 - 来自专栏快乐阿超
gsap
GSAP 的ScrollTrigger插件以最少的代码提供令人惊叹的基于滚动的动画。 gsap.matchMedia()使构建响应式、易于访问的动画变得轻而易举。 3.12/dist/gsap.min.js"></script> 安装： npm install gsap 例如： import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); 使用： gsap.to(".box", { x: 500, scrollTrigger: { trigger: ".box", // 触发器元素 start: "top 80%", // 开始触发的滚动位置 end: "top 30%"
58110编辑于 2024-11-24 新鲜出炉的个人主页开源 最好看的
gsap/3.9.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/<em>ScrollTrigger</em>.min.js </p> </div> </footer> <script> gsap.registerPlugin(<em>ScrollTrigger</em>); // 首页动画 50, duration: 1, delay: 1.4}); // 技能部分动画 gsap.from(".skill-item", { scrollTrigger stagger: 0.2 }); // 项目部分动画 gsap.from(".project-item", { scrollTrigger
37610编辑于 2024-10-07- 来自专栏前端自习课
【工具】1923- 12个强大的 JavaScript 动画库，可帮助你提升用户体验
它还附带了 ScrollTrigger 插件，让您只需几行代码即可创建令人印象深刻的基于滚动的动画。
1.6K11编辑于 2024-01-14 - 来自专栏Coco的专栏
超强的苹果官网滚动文字特效实现
} } .g-scroll { position: relative; width: 100vw; height: 400vw; } gsap.timeline({ scrollTrigger
2.9K10编辑于 2022-10-31 - 来自专栏终身学习者
10 个功能强大的 JavaScript 动画库，打造引人入胜的用户体验
它还附带了一个 ScrollTrigger 插件，让您只需少量代码就能创建令人印象深刻的基于滚动的动画。
1.4K30编辑于 2023-09-09
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号