cinematic-scroll-storytelling

name	cinematic-scroll-storytelling
description	用 Lenis 平滑滚动、GSAP ScrollTrigger、滚动联动的推进、错落文字显现、粘性卡片堆叠、视差背景、滚动 scrub 过渡、页脚显现和沉浸式预加载器，打造电影感的滚动驱动落地页。当分析或构建高级编辑风滚动体验、粘性项目堆叠、动态排版或逐区块叙事时使用。

Cinematic Scroll Storytelling

何时使用

• 页面应像一则高级编辑故事，随用户滚动逐步展开。
• 用户提到滚动驱动叙事、滚动联动动画、粘性卡片堆叠、视差、切分文字、预加载器或电影感推进。
• 作品集、工作室、产品或落地页需要带分层纵深的逐区块显现。
• 实现可使用 GSAP、ScrollTrigger 和 Lenis。

效果词汇表

• 滚动驱动叙事：区块随滚动作为一个序列逐个显现。
• 滚动联动动画：进度通过 scrub 直接绑定到滚动。
• 滚动触发运动：动画在区块进入视口时启动。
• 错落显现：单词、行、卡片或元素带小延迟依次进入。
• 渐进显现：不透明度、缩放、模糊、裁切或位置随滚动进度变化。
• 粘性卡片堆叠：粘性卡片在下一张卡片到来时层叠、缩放并后退。
• 视差滚动：背景与前景层以不同速度移动。
• 滚动 scrub：动画通过 scrub: true 或 scrub: 1 跟随滚动条。
• 动态排版：遮罩式切分文字的运动，通常逐词或逐行进行。
• 预加载器：开场加载画面、进度条和入场过渡。

目标质感

• 奢华编辑风网站。
• 高端创意工作室作品集。
• Apple 级别的动效精致度。
• 现代 Awwwards 交互语言。
• 沉浸式电影感落地页。

应避免：

• 弹跳、弹性或回弹的运动。
• 激进的缩放跳变。
• 浮夸的游戏风特效。
• 太多同时进行的滚动效果。
• 让页面难以阅读的滚动劫持。

核心技术栈

npm i gsap lenis

import Lenis from "lenis";
import "lenis/dist/lenis.css";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

if (!reduceMotion) {
  const lenis = new Lenis({
    lerp: 0.08,
    smoothWheel: true,
    wheelMultiplier: 0.9,
  });

  lenis.on("scroll", ScrollTrigger.update);

  gsap.ticker.add((time) => {
    lenis.raf(time * 1000);
  });

  gsap.ticker.lagSmoothing(0);
}

window.addEventListener("load", () => ScrollTrigger.refresh());

动效令牌

• 入场缓动：power3.out 或 power4.out。
• scrub 场景：ease: "none" 配 scrub: 0.8 到 1.4。
• 文字显现时长：0.8s 到 1.1s。
• 卡片显现时长：0.9s 到 1.2s。
• 单词错落：0.035s 到 0.07s。
• 行错落：0.08s 到 0.14s。
• 卡片错落：0.06s 到 0.1s。
• 显现偏移：y: 24 到 48。
• 模糊：4px 到 10px，再到 0px。
• 粘性卡片缩放纵深：1 降到 0.92。

页面结构剖析

1. 预加载器：黑屏、进度条、品牌/标题、入场淡出。
2. 主视觉：图像视差、遮罩式标题显现、微妙的滚动提示。
3. 引言：逐词的动态排版。
4. 故事区块：滚动触发的上浮淡入、模糊淡入和裁切显现。
5. 近期项目：带缩放和分层纵深的粘性卡片堆叠。
6. 画廊或佐证：滚动 scrub 的横向或渐进显现。
7. 页脚：视差显现或缓慢的向上交接。

标记模式

<div class="preloader" data-preloader>
  <div class="preloader__bar" data-preloader-bar></div>
</div>

<main>
  <section class="hero" data-parallax-section>
    <img data-parallax-layer data-speed="-0.18" src="/hero.jpg" alt="">
    <h1 data-split-reveal>Design that unfolds with cinematic restraint.</h1>
  </section>

  <section data-story-section>
    <p data-split-reveal="words">Every block arrives with quiet intent.</p>
  </section>

  <section class="project-stack" data-sticky-stack>
    <article data-stack-card>Project One</article>
    <article data-stack-card>Project Two
    Project Three
  

  ...

预加载器序列

用预加载器定下电影感基调，然后交接到主视觉显现。

function initPreloader() {
  const loader = document.querySelector("[data-preloader]");
  const bar = document.querySelector("[data-preloader-bar]");
  if (!loader) return Promise.resolve();

  if (reduceMotion) {
    loader.remove();
    return Promise.resolve();
  }

  return new Promise((resolve) => {
    const tl = gsap.timeline({
      defaults: { ease: "power3.out" },
      onComplete: () => {
        loader.remove();
        resolve();
      },
    });

    tl.fromTo(bar, { scaleX: 0, transformOrigin: "left" }, { scaleX: 1, duration: 1.1 })
      .to(loader, { yPercent: -100, duration: 0.9, ease: "power4.inOut" }, "+=0.15");
  });
}

切分文字显现

使用遮罩式溢出容器。避免切分含链接或有意义行内标记的文字。

function splitWords(element) {
  if (element.dataset.splitReady === "true") return;

  const text = element.textContent || "";
  const parts = text.split(/(\s+)/);
  element.textContent = "";
  element.setAttribute("aria-label", text.trim());

  parts.forEach((part) => {
    if (!part.trim()) {
      element.appendChild(document.createTextNode(part));
      return;
    }

    const mask = document.createElement("span");
    const word = document.createElement("span");
    mask.className = "split-word-mask";
    word.className = "split-word";
    word.textContent = part;
    mask.setAttribute("aria-hidden", "true");
    mask.appendChild(word);
    element.appendChild(mask);
  });

  element.dataset.splitReady = ;
}

 () {
   (reduceMotion) {
    gsap.(, { :  });
    ;
  }

  gsap..().( {
    (element);
     words = element.();

    gsap.(
      words,
      { : , : , :  },
      {
        : ,
        : ,
        : ,
        : ,
        : ,
        : ,
        : {
          : element,
          : ,
          : ,
        },
      }
    );
  });
}

.split-word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.split-word {
  display: inline-block;
  will-change: transform, opacity, filter;
}

滚动触发显现

用于常规区块。它们应只播放一次、显得从容，而非抽搐。

function initSectionReveals() {
  if (reduceMotion) {
    gsap.set("[data-story-section], [data-reveal-item]", { autoAlpha: 1, clearProps: "all" });
    return;
  }

  gsap.utils.toArray("[data-story-section]").forEach((section) => {
    const items = section.querySelectorAll("[data-reveal-item]");
    const targets = items.length ? items : section.children;

    gsap.fromTo(
      targets,
      { y: 36, autoAlpha: 0, filter: "blur(8px)" },
      {
        y: 0,
        autoAlpha: 1,
        filter: "blur(0px)",
        duration: 1,
        ease: "power4.out",
        stagger: 0.08,
        scrollTrigger: {
          trigger: section,
          start: "top 82%",
          once: true,
        },
      }
    );
  });
}

滚动联动推进

对电影感推进使用 scrub 时间轴。让 scrub 动画保持线性，由滚动位置来掌控节奏。

function initProgressionScenes() {
  if (reduceMotion) return;

  gsap.utils.toArray("[data-progress-scene]").forEach((scene) => {
    const media = scene.querySelector("[data-progress-media]");
    const copy = scene.querySelectorAll("[data-progress-copy]");

    gsap.timeline({
      scrollTrigger: {
        trigger: scene,
        start: "top top",
        end: "+=140%",
        scrub: 1.1,
        pin: true,
        anticipatePin: 1,
      },
    })
      .fromTo(media, { scale: 1.08 }, { scale: 1, ease: "none" })
      .fromTo(copy, { autoAlpha: 0, y: 40 }, { autoAlpha: 1, y: 0, stagger: 0.15, ease: "none" }, 0.15);
  });
}

粘性卡片堆叠

布局用 position: sticky，分层缩放/纵深用 ScrollTrigger。较早的卡片应在较晚的卡片到来时后退。

[data-sticky-stack] {
  position: relative;
}

[data-stack-card] {
  position: sticky;
  top: 12vh;
  transform-origin: center top;
  will-change: transform, opacity;
}

function initStickyCardStack() {
  if (reduceMotion) return;

  gsap.utils.toArray("[data-sticky-stack]").forEach((stack) => {
    const cards = gsap.utils.toArray(stack.querySelectorAll("[data-stack-card]"));

    cards.forEach((card, index) => {
      const nextCard = cards[index + 1];
      if (!nextCard) return;

      gsap.to(card, {
        scale: 0.92 + index * 0.015,
        autoAlpha: 0.72,
        y: -24,
        ease: "none",
        scrollTrigger: {
          trigger: nextCard,
          start: "top 78%",
          end: "top 24%",
          scrub: true,
          invalidateOnRefresh: true,
        },
      });
    });
  });
}

视差

对主视觉图像、背景层和页脚显现使用视差。保持位移距离小。

function initParallax() {
  if (reduceMotion) return;

  gsap.utils.toArray("[data-parallax-layer]").forEach((layer) => {
    const speed = Number(layer.dataset.speed || -0.16);
    const section = layer.closest("[data-parallax-section]") || layer;

    gsap.to(layer, {
      y: () => window.innerHeight * speed,
      ease: "none",
      scrollTrigger: {
        trigger: section,
        start: "top bottom",
        end: "bottom top",
        scrub: 1,
        invalidateOnRefresh: true,
      },
    });
  });
}

页脚视差显现：

function initFooterReveal() {
  if (reduceMotion) return;

  const footer = document.querySelector("[data-footer-parallax]");
  if (!footer) return;

  gsap.fromTo(
    footer,
    { yPercent: -12, autoAlpha: 0.85 },
    {
      yPercent: 0,
      autoAlpha: 1,
      ease: "none",
      scrollTrigger: {
        trigger: footer,
        start: "top bottom",
        end: "top 45%",
        scrub: 1,
      },
    }
  );
}

构建顺序

1. 先构建静态页面。
2. 添加预加载器和主视觉入场。
3. 添加切分文字显现。
4. 添加逐区块显现。
5. 添加粘性卡片堆叠推进。
6. 添加视差层。
7. 仅在故事需要之处添加 scrub 的固定场景。
8. 添加减弱动效和触摸的回退方案。
9. 在桌面和移动端跨设备做浏览器 QA。

提示词模板

Create a cinematic scroll-driven landing page with smooth Lenis scrolling, GSAP ScrollTrigger animations, staggered text reveals, sticky card stack progression, parallax backgrounds, scroll-scrubbed transitions, section-by-section storytelling, and an immersive preloader animation. Use layered depth, scaling transitions, progressive opacity changes, and smooth viewport-triggered motion for a premium editorial experience.

QA 检查清单

• 禁用 JavaScript 时内容仍可阅读。
• 减弱动效的用户看到静态内容，且没有平滑滚动层。
• 滚动触发的显现只播放一次。
• 滚动联动的场景有意图地使用 scrub。
• 粘性卡片不与页脚重叠、也不困住页面。
• 视差移动保持微妙，不损害可读性。
• 即便图片加载缓慢，预加载器也能可靠退出。
• 在图片/字体/布局变动之后运行 ScrollTrigger.refresh()。
• 若性能下降，移动端采用简化的固定或不固定。