✍️前言
五一假期 ,做了个视差滚动效果,本文将带你深入探索,如何用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小技巧⚡
(如对代码有疑问或进一步探讨,欢迎在评论区留言!)