scroll-cinema技术解析如何用WebGL实现流畅的滚动驱动动画效果【免费下载链接】auteurThe Claude Code skill that directs a website like a film. Commit-sheet, generated assets, build, and an executable anti-slop linter that gates every ship.项目地址: https://gitcode.com/gh_mirrors/au/auteurscroll-cinema是一种将网站像电影一样导演的技术它通过WebGL、GSAP等工具实现滚动驱动的动画效果为用户带来沉浸式的浏览体验。本文将详细解析scroll-cinema技术的核心实现方法、常用工具和最佳实践帮助开发者快速掌握这一现代前端动画技术。核心技术栈与基础设置scroll-cinema技术的实现离不开几个关键工具和库的支持。目前主流的技术栈组合是GSAP 3.13 ScrollTrigger 3.13免费版、Lenis 1.3、Three.js r170同时结合CSS scroll-driven animationsChrome 115 / Safari 26支持和View Transitions API全球支持率88.64%。基础安装与配置首先需要安装必要的依赖包npm i gsap lenis three然后配置Lenis平滑滚动与GSAP的集成这是所有滚动效果的基础import gsap from gsap import ScrollTrigger from gsap/ScrollTrigger import Lenis from lenis import lenis/dist/lenis.css gsap.registerPlugin(ScrollTrigger) const lenis new Lenis() lenis.on(scroll, ScrollTrigger.update) // 保持ScrollTrigger与Lenis同步 gsap.ticker.add((time) lenis.raf(time * 1000)) gsap.ticker.lagSmoothing(0) // 防止标签页切换后GSAP追赶动画这个基础设置非常关键所有后续的滚动效果都依赖于此没有正确配置的话会导致动画抖动或不同步。滚动驱动动画的实现方式scroll-cinema提供了多种实现滚动驱动动画的方式开发者可以根据不同的叙事需求选择合适的技术1. 滚动擦洗视频Scroll-scrubbed video当用户滚动页面时预生成的视频会随着滚动进度前后擦洗。这种技术常用于产品展示可以创造出用户即导演的概念。视频准备# H.264 baseline用于Safari/旧AndroidVP9用于Chrome ffmpeg -i source.mp4 -c:v libx264 -profile:v baseline -level 3.1 -pix_fmt yuv420p \ -movflags faststart -crf 23 hero.mp4 ffmpeg -i source.mp4 -c:v libvpx-vp9 -crf 30 -b:v 0 hero.webm # 预告片前1-2秒200KB- 主视频加载时的海报效果 ffmpeg -i source.mp4 -t 2 -c:v libx264 -profile:v baseline -level 3.1 -crf 28 teaser.mp4HTML结构video idhero src/hero.webm muted playsinline preloadmetadata/videoJavaScript实现const video document.querySelector(#hero) video.pause() ScrollTrigger.create({ trigger: video, start: top top, end: 400%, pin: true, scrub: 0.5, // 0 即时数值 平滑时间秒建议使用0.3–0.8 onUpdate: (self) { video.currentTime self.progress * video.duration }, })常见问题与解决方案问题解决方案视频大于2MB压缩至≤2MB循环5–8秒加载时显示预告片currentTime在完全加载后重置等待loadedmetadata事件后设置必须使用preloadmetadata擦洗时的 seek 抖动仅在滚动时移动currentTime暂停时不操作iOS Safari自动播放问题muted playsinline属性是必须的 — 没有它们视频无法播放prefers-reduced-motion显示静态海报 autoplay muted loop视频不擦洗2. Canvas图像序列Canvas image sequence通过60–240个预渲染帧根据滚动进度绘制到canvas上。这种方式确定性强没有seek抖动首帧LCP更好适合A/B测试时交换帧。导出帧# 从视频/CGI以30fps导出 ffmpeg -i render.mp4 -vf fps30 -q:v 5 frames/frame_%04d.jpg # WebP更小 ffmpeg -i render.mp4 -vf fps30 -lossless 0 -compression_level 4 -q:v 70 frames/frame_%04d.webp实现代码const canvas document.getElementById(seq) const ctx canvas.getContext(2d) const FRAME_COUNT 120 const frames new Array(FRAME_COUNT) function preloadFrame(i) { return new Promise(resolve { const img new Image() img.onload () { frames[i] img; resolve() } img.onerror resolve // 单个帧损坏不崩溃 img.src /frames/frame_${String(i 1).padStart(4, 0)}.webp }) } async function preloadAll() { // 一次加载8个 — 避免网络饱和 for (let i 0; i FRAME_COUNT; i 8) { await Promise.all( Array.from({ length: 8 }, (_, k) i k) .filter(k k FRAME_COUNT) .map(k preloadFrame(k)) ) } } function draw(progress) { const idx Math.min(FRAME_COUNT - 1, Math.floor(progress * FRAME_COUNT)) if (frames[idx]) ctx.drawImage(frames[idx], 0, 0, canvas.width, canvas.height) } // 使用ScrollTrigger驱动本技术禁止使用原始滚动监听器 preloadAll().then(() { ScrollTrigger.create({ trigger: #seq, start: top top, end: 400%, pin: true, scrub: 0.3, onUpdate: (self) draw(self.progress), }) })3. Three.js位移着色器过渡Three.js displacement shader transition这是scroll-cinema技术的标志性动作通过位移图将两个AI生成的关键帧图像frame A → frame B进行变形由滚动控制擦洗。无需视频即可创建电影般的过渡效果。实现代码import * as THREE from three import gsap from gsap import ScrollTrigger from gsap/ScrollTrigger gsap.registerPlugin(ScrollTrigger) const canvas document.querySelector(#morph) const renderer new THREE.WebGLRenderer({ canvas, antialias: false }) renderer.setPixelRatio(Math.min(2, devicePixelRatio)) // 限制DPR — 节省Retina设备上的FPS renderer.outputColorSpace THREE.SRGBColorSpace const scene new THREE.Scene() // 正交相机 2×2平面 屏幕空间四边形无透视计算 const camera new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1) const loader new THREE.TextureLoader() const [texA, texB, disp] await Promise.all([ loader.loadAsync(/assets/s3-peak-a.webp), loader.loadAsync(/assets/s3-peak-b.webp), // 位移图任何柔和的灰度图 — 云/噪点或frame A本身 // 模糊至~20px灰度免费变形会跟随图像自身的形态 loader.loadAsync(/assets/s3-disp.webp), ]) ;[texA, texB].forEach(t { t.colorSpace THREE.SRGBColorSpace }) const material new THREE.ShaderMaterial({ uniforms: { texA: { value: texA }, texB: { value: texB }, disp: { value: disp }, progress: { value: 0 }, intensity: { value: 0.3 }, // 0.15 微妙 · 0.3 默认 · 0.6 戏剧化 // cover-fit校正平面宽高比 vs 图像宽高比 scale: { value: coverScale(texA, canvas) }, }, vertexShader: /* glsl */ varying vec2 vUv; void main() { vUv uv; gl_Position vec4(position, 1.0); } , fragmentShader: /* glsl */ uniform sampler2D texA, texB, disp; uniform float progress, intensity; uniform vec2 scale; varying vec2 vUv; void main() { vec2 uv (vUv - 0.5) * scale 0.5; // object-fit: cover float d texture2D(disp, uv).r; // 经典位移变形A沿地图滑出B滑入 vec2 uvA uv vec2( progress * d * intensity, 0.0); vec2 uvB uv - vec2((1.0 - progress) * d * intensity, 0.0); vec4 a texture2D(texA, uvA); vec4 b texture2D(texB, uvB); gl_FragColor mix(a, b, smoothstep(0.15, 0.85, progress)); } , }) scene.add(new THREE.Mesh(new THREE.PlaneGeometry(2, 2), material)) // cover-fit辅助函数返回UV缩放使图像覆盖画布而不变形 function coverScale(tex, el) { const ia tex.image.width / tex.image.height const ca el.clientWidth / el.clientHeight return ca ia ? new THREE.Vector2(1, ia / ca) : new THREE.Vector2(ca / ia, 1) } // --- 滚动 → 进度仅在变化时渲染无空闲rAF循环--- ScrollTrigger.create({ trigger: #scene-peak, start: top top, end: 250%, pin: true, scrub: 0.5, onUpdate: (self) { material.uniforms.progress.value self.progress renderer.render(scene, camera) }, }) addEventListener(resize, () { renderer.setSize(canvas.clientWidth, canvas.clientHeight, false) material.uniforms.scale.value coverScale(texA, canvas) renderer.render(scene, camera) }) renderer.setSize(canvas.clientWidth, canvas.clientHeight, false) renderer.render(scene, camera)位移方向变体使用vec2(0.0, d * intensity)实现垂直流动使用(uv - 0.5) * d * intensity实现径向绽放根据场景的相机运动旋转向量实现定向变形。实用动画效果与组件文本揭示/交错Text reveal / stagger文本逐行、逐词或逐字符地从遮罩后出现控制阅读节奏并创造电影般的韵律。使用SplitType实现免费MIT许可import SplitType from split-type const text new SplitType(.hero h1, { types: lines, words, chars }) gsap.from(text.chars, { opacity: 0, y: 20, stagger: 0.025, duration: 0.6, ease: power2.out, scrollTrigger: { trigger: .hero, start: top 70% }, }) // 调整大小时重新计算仅在绝对定位模式下需要 window.addEventListener(resize, () text.split())在目标元素上添加font-kerning: none— 防止分割后出现1–2px的字符跳动。视差滚动Depth parallax2–4个图层以不同速度移动创造前景/背景深度感。适用于带有分层插图或照片合成的英雄区域。HTML结构section classparallax-scene>document.querySelectorAll([data-parallax-container]).forEach(container { container.querySelectorAll(.layer[data-speed]).forEach(layer { const speed parseFloat(layer.dataset.speed) gsap.to(layer, { yPercent: -30 * speed, ease: none, scrollTrigger: { trigger: container, start: top bottom, end: bottom top, scrub: true, }, }) }) })光标视差Cursor parallax与滚动视差不同这种效果通过光标位置移动图层使静态合成图在鼠标移动时产生立体感。实现代码document.querySelectorAll([data-pointer-parallax]).forEach(scene { const layers [...scene.querySelectorAll(.layer[data-depth])] let tx 0, ty 0, raf 0 const apply () { raf 0 for (const l of layers) { const d parseFloat(l.dataset.depth) * 100 // 屏幕边缘的移动像素 l.style.transform translate3d(${(-tx*d).toFixed(1)}px, ${(-ty*d).toFixed(1)}px, 0) } } const onMove e { const r scene.getBoundingClientRect() tx ((e.clientX - r.left) / r.width - 0.5) * 2 // 从中心-1..1 ty ((e.clientY - r.top) / r.height - 0.5) * 2 if (!raf) raf requestAnimationFrame(apply) // 每帧只写一次transform不要每个事件都写 } // 仅桌面指针触摸没有悬停尊重reduced-motion if (matchMedia((hover: hover) and (pointer: fine)).matches !matchMedia((prefers-reduced-motion: reduce)).matches) { scene.addEventListener(pointermove, onMove, { passive: true }) scene.addEventListener(pointerleave, () { tx ty 0; apply() }) } })CSS.tilt-scene .layer { transition: transform 120ms ease-out; will-change: transform; }性能优化与最佳实践动画性能优化使用requestAnimationFrame所有视觉更新都应在rAF中进行避免在事件处理程序中直接修改样式优化WebGL性能限制DPR为2避免Retina屏幕上的过度渲染复用WebGL上下文不要为每个场景创建新的渲染器适当时候停止渲染循环如元素不可见时资源预加载批量加载图像序列避免网络拥塞使用link relpreload预加载关键资源可访问性考虑尊重prefers-reduced-motion为减少动画偏好的用户提供静态替代方案const reduceMotion window.matchMedia((prefers-reduced-motion: reduce)).matches if (!reduceMotion) { // 初始化SplitType、ScrollTrigger擦洗等动画 } else { // 立即显示所有文本显示海报帧 document.querySelectorAll(.reveal-text).forEach(el el.classList.add(is-visible)) }为屏幕阅读器提供替代内容在canvas元素上添加roleimg和aria-label为复杂动画提供文字描述组装顺序按以下顺序构建scroll-cinema效果每个步骤都依赖于前一步首先建立平滑滚动基础配置Lenis GSAP集成实现英雄区域滚动擦洗视频或Three.js位移这会设定网站的基调并及早揭示性能限制从上到下实现各部分每个部分的ScrollTrigger初始化后调用ScrollTrigger.refresh()重新计算位置最后实现文本揭示在标题上使用SplitType/SplitText将各部分联系在一起且调整成本最低常见问题与解决方案效果主要实现备选方案1备选方案2Three.js / WebGL场景WebGLpicture静态海报无CSS背景CSSanimation-timeline原生API通过supports检查动态导入GSAP静态可见状态滚动擦洗视频video ScrollTrigger超时canplay后使用Canvas图像序列静态海报图像环境音频WebAudio audio默认静音无声音文本交错SplitType GSAPCSS过渡 IntersectionObserver立即可见总结scroll-cinema技术通过结合WebGL、GSAP、Three.js等现代前端技术创造出电影般的滚动驱动动画效果极大地提升了用户体验。无论是产品展示、叙事型网站还是品牌宣传页面scroll-cinema都能为用户带来沉浸式的浏览体验。通过本文介绍的技术栈、实现方法和最佳实践开发者可以开始构建自己的scroll-cinema效果。记住优秀的滚动动画应该服务于内容而不是喧宾夺主。始终考虑性能优化和可访问性为所有用户提供流畅的体验。要开始使用scroll-cinema技术可以克隆仓库git clone https://gitcode.com/gh_mirrors/au/auteur探索项目中的templates/scroll-flight-engine.js和reference/scroll-cinema.md等文件获取更多实现细节和示例代码。【免费下载链接】auteurThe Claude Code skill that directs a website like a film. Commit-sheet, generated assets, build, and an executable anti-slop linter that gates every ship.项目地址: https://gitcode.com/gh_mirrors/au/auteur创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考