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

863 阅读2分钟

✍️前言

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

先看效果

动画.gif

👊实现方式

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小技巧⚡

(如对代码有疑问或进一步探讨,欢迎在评论区留言!)