🚀网页视觉魔法—CSS视差滚动

✍️前言

五一假期 ，做了个视差滚动效果，本文将带你深入探索，如何用CSS+Gsap打造丝滑的视差滚动效果，无论你是前端开发者还是UI设计师，都能从中获得灵感，让你的网页在滚动之间，讲述更动人的视觉故事。

先看效果

👊实现方式

gsap + gsap/ScrollTrigger插件实现

gsap官方文档是一个功能强大的动画平台，能够帮助开发者实现各种动画需求。

• ScrollTrigger 监听滚动位置：动态触发动画。

注册插件

import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

• GSAP 控制元素位移/透明度/缩放等属性：根据滚动距离调整元素运动速度，形成视差层次。

 gsap.fromTo(
      el,
      {
        backgroundPositionY: `-${window.innerHeight / 2}px`,
      },
      {
        backgroundPositionY: `${window.innerHeight / 2}px`,
        direction: 3,
        ease: "none",
        scrollTrigger: {
          trigger: el,
          scrub: true,
        },
      }
    );

以vue3+ts代码为例，附上完整代码

<template>
  <ul class="custom-list">
    <li
      v-for="(item, index) in items"
      :key="index"
      class="list-item"
      :style="{ backgroundImage: `url(${item.bgImage})` }"
      ref="listItems"
    >
      {{ item.text }}
    </li>
  </ul>
</template>

<script setup lang="ts">
import img1 from "../assets/img/1.jpg";
import img2 from "../assets/img/2.png";
import img3 from "../assets/img/3.png";

import { onMounted, ref } from "vue";
import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

interface ListItem {
  text: string;
  bgImage: string;
}

const items: ListItem[] = [
  {
    text: "只有我才能带领我们走向胜利",
    bgImage: img1,
  },
  {
    text: "我于杀戮之中盛放，亦如黎明中的花朵",
    bgImage: img2,
  },
  {
    text: "死亡如风，常伴吾身",
    bgImage: img3,
  },
];

const listItems = ref<HTMLElement[]>([]);

onMounted(() => {
  listItems.value.forEach((el, index) => {
    gsap.fromTo(
      el,
      {
        backgroundPositionY: `-${window.innerHeight / 2}px`,
      },
      {
        backgroundPositionY: `${window.innerHeight / 2}px`,
        direction: 3,
        ease: "none",
        scrollTrigger: {
          trigger: el,
          scrub: true,
        },
      }
    );
  });
});
</script>

<style scoped lang="scss">
.custom-list {
  display: flex;
  flex-direction: column;
  width: 100vw;
  .list-item {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 46px;
    font-weight: bold;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}
</style>

css实现

background-attachment

background-attachment CSS 属性决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。

代码基本不变，子元素加上background-attachment即可搞定，附上完整代码。

<template>
  <ul class="custom-list">
    <li
      v-for="(item, index) in items"
      :key="index"
      class="list-item"
      :style="{ backgroundImage: `url(${item.bgImage})` }"
    >
      {{ item.text }}
    </li>
  </ul>
</template>

<script setup lang="ts">
import img1 from "../assets/img/1.jpg";
import img2 from "../assets/img/2.png";
import img3 from "../assets/img/3.png";

interface ListItem {
  text: string;
  bgImage: string;
}

const items: ListItem[] = [
  {
    text: "只有我才能带领我们走向胜利",
    bgImage: img1,
  },
  {
    text: "我于杀戮之中盛放，亦如黎明中的花朵",
    bgImage: img2,
  },
  {
    text: "死亡如风，常伴吾身",
    bgImage: img3,
  },
];
</script>

<style scoped lang="scss">
.custom-list {
  display: flex;
  flex-direction: column;
  width: 100vw;

  .list-item {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 46px;
    font-weight: bold;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
    overflow: hidden;
  }
}
</style>

☝️总结

特性	GSAP + ScrollTrigger	纯 CSS
控制精度	像素级精准控制	依赖浏览器默认滚动行为
复杂动画	支持组合动画（旋转+缩放）	仅支持位移/透明度
性能	优化后流畅（60fps）	简单场景更轻量
兼容性	支持 IE10+	部分属性需现代浏览器
调试工具	ScrollTrigger 可视化标记	无

---

相对于纯CSS，通过 GSAP + ScrollTrigger，你可以实现从基础到高级的视差效果，同时保持优秀的性能。但是在日常开发中仍需根据实际情况来。

👉最后

视差滚动早已不再是网页设计的加分项，而是提升用户沉浸感的核心技术之一。灵感不息，创作不止，如果还有更加简便的方式，我都会一一加上，感谢大家的垂阅！🤓

如果想了解更多CSS的小技巧，可以服用 开发中保证你用得到的css小技巧⚡

（如对代码有疑问或进一步探讨，欢迎在评论区留言！）