scroll-cinema技术解析：如何用WebGL实现流畅的滚动驱动动画效果

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/auteur

scroll-cinema是一种将网站像电影一样导演的技术，它通过WebGL、GSAP等工具实现滚动驱动的动画效果，为用户带来沉浸式的浏览体验。本文将详细解析scroll-cinema技术的核心实现方法、常用工具和最佳实践，帮助开发者快速掌握这一现代前端动画技术。

核心技术栈与基础设置

scroll-cinema技术的实现离不开几个关键工具和库的支持。目前主流的技术栈组合是：GSAP 3.13 + ScrollTrigger 3.13（免费版）、Lenis 1.3、Three.js r170+，同时结合CSS scroll-driven animations（Chrome 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/旧Android，VP9用于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.mp4

HTML结构：

<video id="hero" src="/hero.webm" muted playsinline preload="metadata"></video>

JavaScript实现：

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 }, })

常见问题与解决方案：

2. Canvas图像序列（Canvas image sequence）

通过60–240个预渲染帧，根据滚动进度绘制到<canvas>上。这种方式确定性强，没有seek抖动，首帧LCP更好，适合A/B测试时交换帧。

导出帧：

# 从视频/CGI以30fps导出： ffmpeg -i render.mp4 -vf "fps=30" -q:v 5 frames/frame_%04d.jpg # WebP（更小）： ffmpeg -i render.mp4 -vf "fps=30" -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 parallax）

2–4个图层以不同速度移动，创造前景/背景深度感。适用于带有分层插图或照片合成的英雄区域。

HTML结构：

<section class="parallax-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; }

性能优化与最佳实践

动画性能优化

1. 使用requestAnimationFrame：所有视觉更新都应在rAF中进行，避免在事件处理程序中直接修改样式

2. 优化WebGL性能：

   • 限制DPR为2，避免Retina屏幕上的过度渲染
   • 复用WebGL上下文，不要为每个场景创建新的渲染器
   • 适当时候停止渲染循环，如元素不可见时

3. 资源预加载：

   • 批量加载图像序列，避免网络拥塞
   • 使用<link rel="preload">预加载关键资源

可访问性考虑

1. 尊重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')) }

2. 为屏幕阅读器提供替代内容：
   • 在canvas元素上添加role="img"和aria-label
   • 为复杂动画提供文字描述

组装顺序

按以下顺序构建scroll-cinema效果，每个步骤都依赖于前一步：

1. 首先建立平滑滚动基础：配置Lenis + GSAP集成
2. 实现英雄区域：滚动擦洗视频或Three.js位移，这会设定网站的基调并及早揭示性能限制
3. 从上到下实现各部分：每个部分的ScrollTrigger初始化后，调用ScrollTrigger.refresh()重新计算位置
4. 最后实现文本揭示：在标题上使用SplitType/SplitText将各部分联系在一起，且调整成本最低

常见问题与解决方案

总结

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