--- theme: smartblue highlight: a11y-dark --- # 为啥要写最能唬人的前端工种是啥？最能出活的前端模块是啥？跟大家讲，真的是搞动画那一块，搞特效那一块，搞3d、webgl那一块。出活，真的出活。吭哧吭哧一些高深的框架或者死磕一个难啃的技术硬骨头老半天，给不懂技术的人看，他未必能懂，可能他还会心想：”做老半天，啊？就这...要我来我也会（翻白眼🙄）“。真是这样的。所以说，唬得住人的，绝b有视觉滚动这一块。搜一些外国佬的一些产品官网，十个有八个是类似这样的。我们熟悉的苹果官网也是这样的。

封面图.gif

![封面图.gif](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/2c0c064486b44ef88bf3b6e2a146ad6e~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5bCPb2xk5byf:q75.awebp?rk3s=f64ab15b&x-expires=1751944773&x-signature=jSx7NeYjzlEXL9wenSd70I4i%2FUU%3D) 再多的，我不举例了。那身为前端的，切图仔的，小卡拉米的，千千万万个我，绝不能说不会。一般人会看到一个官网有这种视差效果，就会打开给你看，问：”你说你是前端，那你会做这个效果吗“。这个时候，咱一定得把这个ac中间那个字母给支棱起来。不能丢了面。去搜库搜包，借助工具给它搞出来。 # 不要说不行要做这种视觉滚动效果，给jym推荐一个库，啥库呢？[gsap](https://github.com/greensock/GSAP) 这个玩意，能通过最少的代码实现令人惊叹的滚动动画。外国佬很多网站，甚至我们国内很多官网，搞这种装ac中间那个字母的官网，离不开这个库。 ## 咋用写原生，不搞框架的：就用cdn，引就行了： ```js ``` 引完这个gsap的库的js呢，完呢，再引入一个插件，叫`ScrollTrigger`，两者一结合，啥滚动动画能做不出来你说，官网都说了:GSAP的ScrollTrigger插件通过最少的代码实现令人惊叹的滚动动画。 ```html // 每个section都有个背景，和一个h1的文字

111

222

333

``` 上面就把html那一块写完了，接着写js： ```js const sections = document.querySelectorAll('section'); // 获取页面中所有的

元素 sections.forEach(se => { // 从初始到目标的动画 gsap.fromTo(se, { backgroundPositionY: `-${window.innerHeight / 2}px`, // 向上偏移（初始背景垂直位置为视口高度一般的负值） }, { backgroundPositionY: `${window.innerHeight / 2}px`, // 向下偏移（视口高度的一般的正值） duration: 3, // 动画持续3s ease: 'none', // 线性曲线 }) }) ``` 接下来用到`ScrollTrigger`插件: ```js const sections = document.querySelectorAll('section'); // 获取页面中所有的

元素 gsap.registerPlugin(ScrollTrigger); // gsap注册插件ScrollTrigger sections.forEach(se => { // 从初始到目标的动画 gsap.fromTo(se, { backgroundPositionY: `-${window.innerHeight / 2}px`, // 向上偏移（初始背景垂直位置为视口高度一般的负值） }, { backgroundPositionY: `${window.innerHeight / 2}px`, // 向下偏移（视口高度的一般的正值） duration: 3, // 动画持续3s ease: 'none', // 线性曲线 scrollTrigger: { trigger: se, // 触发的是当前的section scrub: true, // 按滚动条去做这个视觉效果 } }) }) ``` # 总结好了，如果你觉得神奇，停止往下看，自个儿去官网瞅一眼，别听我在这瞎叨叨，自己去瞅一眼，它啊，不单单是我说的这种视差滚动效果可以做，还有很多动画可以搞，它是一个动画库，我只是说的其一。动画滴本质实质上就是数字的变动。动来动去就有了动画。这个库帮我们做了很多活，我们拿来用，我们就关注应该怎么变动数字，哪些数字，就完事。`前人栽树，后人乘凉`，有时候有效地聪明地灵活地有思路地去运用一些库一些包会让事情事半功倍，让效率提升，让时间缩减，让效果更美妙。 ## 特效往往，玩这些特效的，💰会报得高： * **视差滚动（Parallax Scrolling）**：通过背景层与内容层滚动速度差异营造空间感，适用于官网、营销页等场景，开发成本低但感知价值高。 * **3D交互（Three.js/WebGL）**：如产品展示、虚拟展厅等，结合Canvas或WebGL实现，技术门槛较高但报价可达数万元。 * **粒子动画（Particles.js/GSAP）**：用于登录页、Loading动画等，开发周期短但视觉效果突出，适合按模块打包报价。 * **SVG路径动画**：适用于图标、数据可视化等场景，通过GreenSock等工具实现，复杂度可控且客户感知专业性强。推荐大家工具，或许对你当前比较恼火的无法着手的特效，可能有思路：GSAP（动画库）、Three.js（3D渲染）、Pixi.js（2D渲染）。报价策略：`优先选择视觉效果显著、开发效率高的特效类型（如视差滚动、3D交互）`，报价可以溢出点，客户会觉得干了很多活才出这么牛的效果，交付的时候，特别是官网，也不会说太干巴巴，就只是图垒字，字垒图这种。有动画的官网，会使得更多的阅览量，触动更多的购买欲。