创造一个流畅的滚动体验：
使用HTML+CSS+JavaScript实现丝滑滚动网页
在现代网络浏览中，用户体验是至关重要的。而网页的滚动功能是用户与网页内容交互的核心部分之一。在本文中，我们将探讨如何使用HTML、CSS和JavaScript创建一个丝滑滚动的网页，以提升用户的浏览体验。
目录
HTML结构
首先，我们需要定义我们网页的基本结构。以下是一个简单的HTML模板，用于创建我们的滚动网页：
<body>
<nav>
<a href="https://aad.tw/qo23" target="_blank">
<svg class="w-9" viewBox="0 0 969 955" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="161.191" cy="320.191" r="133.191" stroke="currentColor" stroke-width="20"></circle>
<circle cx="806.809" cy="320.191" r="133.191" stroke="currentColor" stroke-width="20"></circle>
<circle cx="695.019" cy="587.733" r="31.4016" fill="currentColor"></circle>
<circle cx="272.981" cy="587.733" r="31.4016" fill="currentColor"></circle>
<path
d="M564.388 712.083C564.388 743.994 526.035 779.911 483.372 779.911C440.709 779.911 402.356 743.994 402.356 712.083C402.356 680.173 440.709 664.353 483.372 664.353C526.035 664.353 564.388 680.173 564.388 712.083Z"
fill="currentColor"></path>
<rect x="310.42" y="448.31" width="343.468" height="51.4986" fill="#FF1E1E"></rect>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M745.643 288.24C815.368 344.185 854.539 432.623 854.539 511.741H614.938V454.652C614.938 433.113 597.477 415.652 575.938 415.652H388.37C366.831 415.652 349.37 433.113 349.37 454.652V511.741L110.949 511.741C110.949 432.623 150.12 344.185 219.845 288.24C289.57 232.295 384.138 200.865 482.744 200.865C581.35 200.865 675.918 232.295 745.643 288.24Z"
fill="currentColor"></path>
</svg>
</a>
<a href="https://aad.tw/qo23">跳转 CSDN</a>
</nav>
<div class="indicators">
<a href="#item-1" class="indicator"></a>
<a href="#item-2" class="indicator"></a>
<a href="#item-3" class="indicator"></a>
<a href="#item-4" class="indicator"></a>
<a href="#item-5" class="indicator"></a>
</div>
<main>
<section>
<article id="item-1">
<div class="fixed">
<img src="https://fastly.picsum.photos/id/310/1920/1080.jpg?hmac=HDJM8ptvuyfahXPE6mcsYhG1XGE1mUb2oaa4hlFZ0yg"
alt="">
<div class="content">
<h1>滚动查看.</h1>
<p>神奇的 CSS 滚动驱动动画为登陆页面提供动力。不影响 JavaScript。
动画在主线程外运行。将它们串联起来，并使用固定元素.</p>
</div>
</div>
</article>
</section>
<section>
<article id="item-2">
<div class="fixed">
<img src="https://fastly.picsum.photos/id/846/1920/1080.jpg?hmac=rx55XDjKPLjmW5WdHBRqOphU4wZkLT5W3TC_WBdvyVY"
alt="">
</div>
<div class="static">
<div class="content">
<div class="text-wrap">
<div class="loud-wrap">
<h2>继续滚动.</h2>
</div>
</div>
</div>
</div>
</article>
<article id="item-3">
<div class="fixed"></div>
<div class="static">
<div class="content">
<h2>用心敲代码.<br />创造无限可能.</h2>
</div>
</div>
</article>
<article id="item-4">
<div class="fixed">
<img src="https://fastly.picsum.photos/id/985/1920/1080.jpg?hmac=dLb_5lBJW4AZhZDUXweY5WlrnscpKLtCKffaqSrF9Vw"
alt="">
</div>
<div class="static">
<div class="content">
<h2>敲出很酷的代码.</h2>
<div class="chat-container">
<div class="text-blocks">
<p>你好!我叫北方的江.</p>
<p>很高兴遇见你.</p>
<p>灵感来自大佬@Jhey</p>
<p>侵权请联系我下架作品</p>
<p>联系方式:1745045689@qq.com</p>
</div>
</div>
<div class="filler">
<h2>再好的教程始终比不上<br>
自己的一次实践.</h2>
</div>
</div>
</div>
</article>
<article id="item-5">
<div class="fixed">
<img src="https://pic.netbian.com/uploads/allimg/240527/211113-17168154737ef3.jpg" alt="" />
<div class="content">
<h2>我们<br>下期间!</h2>
</div>
</div>
</article>
</section>
</main>
</body>在这个HTML结构中，我们定义了一个标题和几个部分，每个部分都有一个唯一的ID，以便我们稍后在JavaScript中进行定位。
CSS样式
接下来，我们可以使用CSS来美化我们的网页，并为滚动效果做一些准备工作。以下是一个简单的CSS文件：
@font-face {
font-family: "Geist Sans";
src: url("https://assets.codepen.io/605876/GeistVF.ttf") format("truetype");
}
*,
*:after,
*:before {
box-sizing: border-box;
}
html {
scroll-snap-type: y mandatory;
}
body {
min-height: 100vh;
font-family: "Geist Sans", "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
font-weight: 80;
background: black;
color: hsl(0 0% 90%);
overflow-x: hidden;
}
p {
max-width: 40ch;
}
section:nth-of-type(1) {
scroll-snap-align: center;
height: 100vh;
}
section:nth-of-type(2) {
scroll-snap-align: start;
}
article {
min-height: 100vh;
}
:is(h1, h2) {
font-weight: 70;
font-size: clamp(2.5rem, 3.35vw + 1rem, 8rem);
letter-spacing: -0.075ch;
margin: 0;
}
h1 {
color: hsl(0 0% 90%);
}
:is(section, article) {
position: relative;
}
nav {
position: fixed;
top: 0;
width: 100%;
padding: 1rem;
z-index: 999;
display: flex;
justify-content: space-between;
}
nav a:first-of-type {
width: 48px;
aspect-ratio: 1;
display: grid;
place-items: center;
color: white;
}
nav a:last-of-type {
background: hsl(173 100% 51%);
color: black;
padding: 1rem 2rem;
border-radius: 22px;
text-decoration: none;
font-weight: 120;
transition: background 0.2s;
}
nav a:last-of-type:is(:hover, :focus-visible) {
background: hsl(173 100% 40%);
}
.content {
margin: 0 auto;
width: 900px;
max-width: 100%;
height: 100%;
z-index: 2;
position: absolute;
inset: 0;
padding: 1rem;
}
.fixed img {
height: 100%;
width: 150%;
object-fit: cover;
z-index: -1;
position: absolute;
inset: 0;
left: 50%;
translate: -50% 0;
filter: brightness(0.5);
}
section:first-of-type img {
left: 50%;
translate: -50% 0;
}
section:first-of-type {
padding: 2rem 1rem;
display: grid;
align-content: end;
justify-content: start;
}
section:first-of-type .fixed {
z-index: 5;
}
section:first-of-type .fixed .content {
margin: 0 auto;
width: 900px;
max-width: 100%;
display: grid;
align-content: center;
justify-content: start;
padding: 6rem 2rem;
height: 100%;
}
section:first-of-type {
background: black;
}
section:first-of-type p {
font-size: clamp(1rem, 0.2vw + 1rem, 2rem);
padding: 0 2rem 0 0;
}
section:nth-of-type(2) article:first-of-type .fixed {
z-index: 2;
}
section:nth-of-type(2) .content {
display: grid;
padding: 4rem 1rem;
align-content: center;
}
section:nth-of-type(2) article:first-of-type .content {
align-content: end;
}
section:nth-of-type(2) article:first-of-type .fixed::after {
content: "";
position: absolute;
inset: 0;
background: hsl(0 0% 0% / 0.25);
}
section:nth-of-type(2) article:first-of-type h2 {
padding: 1rem 0;
}
section:nth-of-type(2) article:nth-of-type(2) h2 {
padding: 0 2rem 0 0;
}
section:nth-of-type(2) article:nth-of-type(2) .fixed {
background: black;
z-index: 2;
}
section:nth-of-type(2) article:nth-of-type(3) .content {
align-content: start;
}
section:nth-of-type(2) article:nth-of-type(3) .fixed {
z-index: 2;
}
section:nth-of-type(2) article:nth-of-type(3) img {
filter: saturate(0.5) brightness(0.5);
}
.text-blocks {
width: 100%;
max-width: 46ch;
justify-self: end;
display: grid;
place-items: center;
gap: 2rem 0;
padding-right: 2rem;
}
/* 文本板块 */
.chat-container {
height: 100vh;
width: 100%;
position: sticky;
top: 0;
display: grid;
place-items: center;
}
.text-blocks p {
display: inline-block;
border-radius: 6px;
margin: 0;
font-size: clamp(1.5rem, 0.5vw + 1rem, 4rem);
font-weight: 120;
}
.text-blocks p:nth-of-type(even) {
justify-self: end;
text-align: right;
color: hsl(173 100% 51%);
}
.text-blocks p:nth-of-type(odd) {
justify-self: start;
}
.filler {
display: none;
}
/* 滚动指示器 */
.indicators {
width: 20px;
aspect-ratio: 1 / 7;
position: fixed;
top: 50%;
right: 1rem;
z-index: 999999;
translate: 0 -50%;
display: flex;
flex-direction: column;
}
.indicator {
background: linear-gradient(white, white) padding-box;
border-radius: 100px;
width: 100%;
min-height: 20px;
display: inline-block;
flex: 1;
border: 2px solid transparent;
}
html {
scroll-behavior: smooth;
}
@supports (animation-timeline: scroll()) {
section:nth-of-type(1) article {
view-timeline: --article-one;
}
section:nth-of-type(2) article:nth-of-type(1) {
view-timeline: --article-two;
}
section:nth-of-type(2) article:nth-of-type(2) {
view-timeline: --article-three;
}
section:nth-of-type(2) article:nth-of-type(3) {
view-timeline: --article-four;
}
section:nth-of-type(2) article:nth-of-type(4) {
view-timeline: --article-five;
}
.fixed {
position: fixed;
inset: 0;
}
.static {
position: absolute;
inset: 0;
z-index: 6;
}
.filler {
display: block;
width: 100%;
position: absolute;
bottom: 30vh;
padding: 1rem;
}
.text-blocks p {
animation: slide-in, fade-in;
animation-fill-mode: both;
animation-timing-function: linear;
animation-timeline: --article-four;
}
.text-blocks p:nth-of-type(1) {
animation-range: entry-crossing 50% entry-crossing 55%;
}
.text-blocks p:nth-of-type(2) {
animation-range: entry-crossing 55% entry-crossing 60%;
}
.text-blocks p:nth-of-type(3) {
animation-range: entry-crossing 60% entry-crossing 65%;
}
.text-blocks p:nth-of-type(4) {
animation-range: entry-crossing 65% entry-crossing 70%;
}
.text-blocks p:nth-of-type(5) {
animation-range: entry-crossing 70% entry-crossing 75%;
}
section:nth-of-type(2) article:last-of-type {
z-index: 5;
}
section:nth-of-type(2) article:nth-of-type(3) {
height: 400vh;
}
section:nth-of-type(2) article:nth-of-type(3) h2 {
margin-top: 80vh;
}
section:nth-of-type(2) article:last-of-type .fixed {
clip-path: ellipse(220% 200% at 50% 300%);
animation: unclip both linear;
animation-timeline: --article-five;
animation-range: entry 20% entry 80%;
}
.filler h2 {
animation: fade-away, fade-out;
animation-timing-function: linear;
animation-fill-mode: both;
animation-timeline: --article-four;
animation-range: exit 40% exit 75%, exit 70% exit 90%;
}
.loud-wrap {
clip-path: inset(0 0 0 0);
animation: unmask both linear;
animation-timeline: --article-two;
animation-range: entry 20% entry 80%;
mask: linear-gradient(white 50%, transparent) 0 100% / 100% 200% no-repeat;
}
.text-wrap {
position: sticky;
bottom: 4rem;
transform-origin: 50% 0;
animation: fade-away both linear, fade-out both linear;
animation-timeline: --article-two;
animation-range: exit 40% exit 75%, exit 70% exit 100%;
}
.text-blocks {
animation: fade-out both linear;
animation-timeline: --article-four;
animation-range: entry-crossing 75% entry-crossing 100%;
}
section:nth-of-type(2) article:nth-of-type(3) .fixed {
animation: fade-in both linear, fade-out both linear;
animation-timeline: --article-four, --article-four;
animation-range: entry 45% exit-crossing 0%, exit 0% exit 15%;
}
section:nth-of-type(2) article:nth-of-type(2) .fixed {
animation: fade-in;
animation-fill-mode: both;
animation-timing-function: linear;
animation-timeline: --article-three;
animation-range: entry 60% exit 30%;
}
section:nth-of-type(2) article:nth-of-type(2) h2 {
animation: slide-in, fade-in, fade-away, fade-out;
animation-fill-mode: both;
animation-timing-function: linear;
animation-timeline: view(), view(), --article-three, --article-three;
animation-range: entry 100% cover 25%, entry 100% cover 35%, exit 20% exit 40%, exit 40% exit 50%;
}
section:nth-of-type(2) article:first-of-type h2 {
animation: slide-up both linear;
animation-timeline: --article-two;
animation-range: entry 20% entry 80%;
}
section:nth-of-type(2) article:first-of-type img {
animation: scale-down both linear;
animation-timeline: --article-two;
animation-range: entry;
}
section:nth-of-type(2) article:first-of-type .fixed {
clip-path: ellipse(220% 200% at 50% 300%);
animation: unclip both linear;
animation-timeline: --article-two;
animation-range: entry 0 entry 100%;
}
section:first-of-type {
view-timeline: --section;
}
section:first-of-type .fixed {
animation: scale-and-move both linear, fade-out both linear;
animation-timeline: --section;
animation-range: exit 0% exit 50%, exit 0% exit 25%;
transform-origin: 50% 0;
}
/* 关键帧集合 */
@keyframes slide-in {
0% {
translate: 0 100%;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
}
@keyframes slide-up {
0% {
translate: 0 100%;
}
}
@keyframes fade-away {
to {
filter: blur(4rem);
}
}
@keyframes unmask {
to {
mask-position: 0 0;
}
}
@keyframes scale-down {
0% {
scale: 5;
}
}
@keyframes unclip {
to {
clip-path: ellipse(220% 200% at 50% 175%);
}
}
@keyframes fade-out {
to {
opacity: 0;
}
}
@keyframes scale-and-move {
to {
translate: 0 -10%;
scale: 0.35 0.5;
}
}
/* 滚动指示板块 */
:root {
timeline-scope:
--article-one,
--article-two,
--article-three,
--article-four,
--article-five;
}
.indicator {
animation: activate, deactivate;
animation-fill-mode: both;
animation-timing-function: linear;
animation-range: entry, exit;
}
.indicator:nth-of-type(1) {
animation-timeline: --article-one;
}
.indicator:nth-of-type(2) {
animation-timeline: --article-two;
}
.indicator:nth-of-type(3) {
animation-timeline: --article-three;
}
.indicator:nth-of-type(4) {
animation-timeline: --article-four;
}
.indicator:nth-of-type(5) {
animation-timeline: --article-five;
}
@keyframes activate {
to {
flex: 3;
}
}
@keyframes deactivate {
to {
flex: 1;
}
}
}在这个CSS文件中，我们定义了一些基本的样式，包括标题的颜色、字体和页面边距。
JavaScript交互
现在是时候为我们的网页添加一些交互了。我们将使用JavaScript来实现平滑滚动效果。以下是我们的JavaScript代码：
import gsap from "https://cdn.skypack.dev/gsap@3.12.0";
import { ScrollTrigger } from "https://cdn.skypack.dev/gsap@3.12.0/ScrollTrigger";
if (!CSS.supports("animation-timeline: view()")) {
gsap.registerPlugin(ScrollTrigger);
gsap.set(".fixed", {
position: "fixed",
inset: 0
});
gsap.set(".static", {
position: "absolute",
inset: 0,
zIndex: 6
});
// 第一部分
gsap.set("section:first-of-type .fixed", {
transformOrigin: "50% 0%"
});
gsap.to("section:first-of-type .fixed", {
scale: "0.35 0.5",
yPercent: -10,
scrollTrigger: {
scrub: 0.5,
trigger: "section:first-of-type",
start: "top top",
end: "bottom 50%"
}
});
gsap.to("section:first-of-type .fixed", {
opacity: 0,
scrollTrigger: {
scrub: 0.5,
trigger: "section:first-of-type",
start: "top top",
end: "bottom 75%"
}
});
// 设置所有滚动动画的第二部分，包括图像缩小等效果
gsap.set("section:nth-of-type(2) article:first-of-type .fixed", {
clipPath: "ellipse(220% 200% at 50% 300%)",
zIndex: 3
});
gsap.to("section:nth-of-type(2) article:first-of-type .fixed", {
clipPath: "ellipse(220% 200% at 50% 175%)",
scrollTrigger: {
scrub: 0.5,
trigger: "section:nth-of-type(2) article:first-of-type",
start: "top bottom",
end: "top top"
}
});
gsap.from("section:nth-of-type(2) article:first-of-type img", {
scale: 5,
scrollTrigger: {
scrub: 0.5,
trigger: "section:nth-of-type(2) article:first-of-type",
start: "top bottom",
end: "top top"
}
});
gsap.set(".loud-wrap", {
clipPath: "inset(0 0 0 0)",
mask: "linear-gradient(white 50%, transparent) 0 100% / 100% 200% no-repeat"
});
gsap.set(".text-wrap", {
position: "sticky",
bottom: "4rem",
transformOrigin: "50% 0"
});
gsap.from("section:nth-of-type(2) article:first-of-type h2", {
yPercent: 100,
scrollTrigger: {
scrub: 0.5,
trigger: "section:nth-of-type(2) article:first-of-type",
start: "top 50%",
end: "top 0%"
}
});
gsap.to("section:nth-of-type(2) article:first-of-type .loud-wrap", {
maskPosition: "0 0",
scrollTrigger: {
scrub: 0.5,
trigger: "section:nth-of-type(2) article:first-of-type",
start: "top 50%",
end: "top 0%"
}
});
// 在退出时模糊文本
gsap.to("section:nth-of-type(2) article:first-of-type .text-wrap", {
filter: "blur(4rem)",
opacity: 0,
scrollTrigger: {
scrub: 0.5,
trigger: "section:nth-of-type(2) article:first-of-type",
start: "bottom 60%",
end: "bottom 25%"
}
});
// 第三部分
gsap.set("section:nth-of-type(2) article:nth-of-type(2) .fixed", {
zIndex: 3
});
gsap.from("section:nth-of-type(2) article:nth-of-type(2) .fixed", {
opacity: 0,
scrollTrigger: {
scrub: 0.5,
trigger: "section:nth-of-type(2) article:nth-of-type(2)",
start: "top 50%",
end: "top -30%"
}
});
gsap.from("section:nth-of-type(2) article:nth-of-type(2) h2", {
yPercent: 100,
opacity: 0,
scrollTrigger: {
scrub: 0.5,
trigger: "section:nth-of-type(2) article:nth-of-type(2)",
start: "top 50%",
end: "top 25%"
}
});
gsap.to("section:nth-of-type(2) article:nth-of-type(2) h2", {
filter: "blur(4rem)",
color: "transparent",
scrollTrigger: {
scrub: 0.5,
trigger: "section:nth-of-type(2) article:nth-of-type(2)",
start: "bottom bottom",
end: "bottom 50%"
}
});
// 第四部分
gsap.set(".filler", {
display: "block",
position: "absolute",
bottom: "30vh",
padding: "1rem"
});
gsap.set("section:nth-of-type(2) article:nth-of-type(3)", {
height: "400vh"
});
gsap.set("section:nth-of-type(2) article:nth-of-type(3) .fixed", {
zIndex: 3
});
gsap.set("section:nth-of-type(2) article:nth-of-type(3) h2", {
marginTop: "80vh"
});
gsap.from("section:nth-of-type(2) article:nth-of-type(3) .fixed", {
opacity: 0,
scrollTrigger: {
trigger: "section:nth-of-type(2) article:nth-of-type(3)",
scrub: 0.5,
start: "top 80%",
end: "top top"
}
});
gsap.to("section:nth-of-type(2) article:nth-of-type(3) img", {
opacity: 0,
scrollTrigger: {
trigger: "section:nth-of-type(2) article:nth-of-type(3)",
scrub: 0.5,
start: "bottom bottom",
end: "bottom 85%"
}
});
// 对文本板块进行动画处理
const LINES = document.querySelectorAll(".text-blocks p");
LINES.forEach((LINE, index) => {
gsap.from(LINE, {
yPercent: 100,
opacity: 0,
scrollTrigger: {
trigger: "section:nth-of-type(2) article:nth-of-type(3)",
scrub: 0.5,
start: `top -=${90 + index * 10}%`,
end: `top -=${100 + index * 10}%`
}
});
});
gsap.to(".text-blocks", {
opacity: 0,
scrollTrigger: {
trigger: "section:nth-of-type(2) article:nth-of-type(3)",
scrub: 0.5,
start: "bottom 130%",
end: "bottom 110%"
}
});
gsap.to(".filler h2", {
opacity: 0,
filter: "blur(4rem)",
scrollTrigger: {
trigger: "section:nth-of-type(2) article:nth-of-type(3)",
scrub: 0.5,
start: "bottom 55%",
end: "bottom 30%"
}
});
// 最后一部分是取消裁剪末尾部分
gsap.set("section:nth-of-type(2) article:last-of-type .fixed", {
clipPath: "ellipse(220% 200% at 50% 300%)",
zIndex: 5
});
gsap.to("section:nth-of-type(2) article:last-of-type .fixed", {
clipPath: "ellipse(220% 200% at 50% 175%)",
scrollTrigger: {
trigger: "section:nth-of-type(2) article:last-of-type",
scrub: 0.5,
start: "top 80%",
end: "top 20%"
}
});
// 滚动指示器的技巧
const INDICATORS = document.querySelectorAll(".indicator");
const ARTICLES = document.querySelectorAll("article");
INDICATORS.forEach((indicator, index) => {
// 这里需要根据卡片位置来对指示器进行动画处理
gsap.to(indicator, {
flex: 3,
repeat: 1,
yoyo: true,
scrollTrigger: {
scrub: true,
trigger: ARTICLES[index],
scroller: "body",
start: "top bottom",
end: "bottom top"
}
});
});
}
结论
通过结合HTML、CSS和JavaScript，我们创建了一个流畅的滚动网页，提升了用户的浏览体验。这个示例只是一个简单的起点，你可以根据自己的需求进一步扩展和定制这个网页，让它更加适合你的项目。
希望这篇文章能够对你有所帮助，祝愉快编码！
254
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
