掌握CSS滚动进度动画技巧

WBOLT_COM 12 月 22, 2023 308 0

掌握CSS滚动进度动画技巧

在动态网页设计领域，利用创新元素来增强用户体验是一个至关重要的方面。其中，CSS 滚动进度动画已成为一种引人注目的技术，它提供了一种具有视觉吸引力的方式，可在浏览网页内容时跟踪和显示用户的进度。网络开发人员将这些动画整合在一起，创造出一种无缝、直观的浏览体验。本文将探讨 CSS 滚动进度动画的领域，这是网页设计中的一种创新方法，可通过具有视觉吸引力和信息量的滚动指示器和动画来增强用户体验，展示如何将静态网页转化为动态和引人入胜的体验。

CSS 滚动进度动画是一种用于创建动态和引人入胜的网页体验的新技术。它允许开发人员将动画与页面的滚动进度联系起来，从而创建与用户交互直接相关的流畅而高效的效果。通过使用各种 CSS 属性和过渡效果，网页开发人员可以将这些动画整合在一起，从而创建无缝、直观的浏览体验。这种技术有助于提高网络应用程序的以下性能：

用户参与：通过在滚动时提供可视化进度反馈，保持用户的参与度。
导航：帮助用户理解网页内容的长度和位置。
用户体验：通过清晰显示内容的长度和位置，提升整体用户体验。
可用性：让用户更容易浏览冗长的网页。
滚动的可视性：直观地显示还剩多少内容可读，减少滚动时的模糊性。
增强美感：为网站增添有吸引力的现代视觉元素。

以下是一些使用了 css 滚动进度动画的网站：

既然我们已经知道什么是 CSS 滚动进度网页动画、它的优点和一些实际例子，那就让我们自己来制作一个吧。

首先，让我们建立文件结构。我们将创建两个文件。这两个文件分别是 css_scroll_animation.html 和 css_scroll_animation.css 。我们的文件结构如下

project root
├── css_scroll_animation.html
|
|── css_scroll_animation.css
│
|

滚动进度动画的 HTML 结构

css_scroll_animation.html 文件

<!DOCTYPE html>
<html>
<head>
<title>Scroll Progress Animation</title>
<link rel="stylesheet" type="text/css" href="/css_scroll_animation.css" />
</head>
<body>
<div class="wrapper">
<figure>
<img
src="https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?w=740&t=st=1698915682~exp=1698916282~hmac=4b5284528580dd237ddd95c13dcadef972ce26a5fbe1e6abe4bd221b65985fbd"
alt=""
/>
</figure>
<figure>
<img
src="https://img.freepik.com/free-photo/wide-angle-shot-single-tree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg?w=740&t=st=1698915748~exp=1698916348~hmac=a9d04389cd2c221e4ac27ee2add0326a80fdce23a71d7885ca48c5f7a46a07b4"
alt=""
/>
</figure>
<figure>
<img
src="https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg?w=826&t=st=1698915788~exp=1698916388~hmac=35c41528412051b4563f4aac14533c68fcbdc2375789f97050941fbc39962093"
alt=""
/>
</figure>
</div>
<section>
<div class="container">
<h1>Section 1</h1>
<p>Scroll vertically and the images move horizontally</p>
</div>
</section>
<section>
<div class="container">
<h2>Section 2</h2>
</div>
</section>
<section>
<div class="container">
<h2>Section 3</h2>
</div>
</section>
</body>
</html>

在 css_scroll_animation.html 文件中，body 元素有四个直接子元素。其中一个子元素是类名为 wrapper 的 div 元素。在这个 div 元素中包含三个 figure 元素。每个图元素都有一个 img 元素，其中包含要显示的图像。其他子元素是三个 section 元素，每个部分的类名都是 container。我们可以看到，在每个 section 元素中，都有一个部分定义了我们所在的部分，只有第一个 section 元素除外，它也有 “垂直滚动，图像水平移动” 的指令。

这就是我们测试网站的样子。

测试网站滚动进度动画

接下来，我们将展示如何使用 CSS 为这些元素设计样式。

滚动进度动画的 CSS 样式

css_scroll_animation.css 文件

@layer reset;
body {
font-family: "Helvetica", sans-serif;
min-height: 300vh;
color: white;
}
img {
height: 100%;
object-fit: cover;
}
figure {
flex: 0 0 99.4vw;
}
section {
min-height: 100vh;
position: relative;
z-index: 1;
}
.wrapper {
display: flex;
position: fixed;
top: 0;
left: 0;
height: 100vh;
}
.container {
background: rgba(46, 42, 181, 0.4);
min-height: 100vh;
padding: 1em clamp(1rem, 2vw, 4vw);
}
@layer reset {
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-size: 1.2rem;
}
@media (min-width: 1200px) {
html {
font-size: 20px;
}
}
img {
display: block;
width: 100%;
}
figure {
margin: 0;
position: relative;
}
}

css_scroll_animation.css 文件会告诉浏览器如何设置 css_scroll_animation.html 文件的样式。首先，它使用 @layer reset 下定义的值重置浏览器预定义的一些默认样式。接下来，我们为 body, img, figure, 和 section 元素编写样式。我们还为类定义了样式：wrapper 和 container。

这就是我们修改 CSS 文件后的网站外观。

滚动进度动画的CSS样式Demo

如果仔细观察 gif，就会发现只有一张图片是可见的，其他图片都是隐藏的，没有滚动，只有文字在移动。为了让图片滚动，我们将修改 CSS 文件，添加动画。

用于滚动进度动画的 CSS 动画

让我们在 CSS 文件中添加一个动画。

@layer reset;
body {
font-family: "Helvetica", sans-serif;
min-height: 300vh;
color: white;
}
img {
height: 100%;
object-fit: cover;
}
figure {
flex: 0 0 99.4vw;
}
section {
min-height: 100vh;
position: relative;
z-index: 1;
}
.wrapper {
display: flex;
position: fixed;
top: 0;
left: 0;
height: 100vh;
animation: slide auto linear;
animation-timeline: scroll();
}
.container {
background: rgba(46, 42, 181, 0.4);
min-height: 100vh;
padding: 1em clamp(1rem, 2vw, 4vw);
}
@keyframes slide {
0% {
translate: 0;
}
100% {
translate: calc(-100% - 100vw);
}
}
@layer reset {
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-size: 1.2rem;
}
@media (min-width: 1200px) {
html {
font-size: 20px;
}
}
img {
display: block;
width: 100%;
}
figure {
margin: 0;
position: relative;
}
}

要在 CSS 中添加动画，我们要使用 @keyframes 规则，并在其旁边加上动画名称，例如 @keyframes <动画名称> 。在我们的代码中，我们添加了 @keyframes slide 一行来定义动画。在 0% 的情况下，元素（在我们的例子中是图片）保持不变，但在 100% 的情况下，使用 CSS 中的计算函数，它将转换到其自身高度和宽度的另一侧，并在 X 轴上转换到视口宽度的 100%。

@keyframes slide {
0% {
translate: 0;
}
100% {
translate: calc(-100% - 100vw);
}
}

要使用已定义的动画，我们需要使用动画规则告诉浏览器动画应该在哪里出现以及如何出现。在这里，我们使用了 shorthand，第一个值代表动画的名称，第二个值是持续时间，第三个值是动画的定时函数。我们在 wrapper 样式中指定了这一点，因为我们希望将动画应用于图像，而 wrapper 是图像容器的类名。

.wrapper {
display: flex;
position: fixed;
top: 0;
left: 0;
height: 100vh;
animation: slide auto linear;
}

此外，我们还添加了 animation-timeline 规则，它告诉浏览器动画应该在何时执行，在我们的例子中就是在滚动时。

.wrapper {
display: flex;
position: fixed;
top: 0;
left: 0;
height: 100vh;
animation: slide auto linear;
animation-timeline: scroll();
}

因此，我们的代码会告诉浏览器，在正文滚动时，图片会在 X 轴上以 100% 的线性速度向反方向移动，浏览器应自动定义执行动画所需的时间。

这意味着，当我们向上或向下滚动时，section 元素会在 Y 轴上向上或向下移动，而图片会在 X 轴上向左或向右移动。

这就是在 CSS 文件中添加动画后的网站表现。

横向滚动进度动画DEMO

响应式 CSS 设计注意事项

响应式实施滚动进度动画需要确保这些动画能在不同尺寸的屏幕上进行适当调整。在设计滚动进度指示器或动画时，考虑它们在大屏幕和小屏幕上的表现至关重要。在我们的代码中，我们通过使用媒体查询规则以及以百分比和视口为单位指定高度和宽度（例如，100% 和 100vw）来实现这一点。这样，当屏幕尺寸调整时，元素就会自动调整。

这就是我们调整屏幕大小时网站的样子。

滚动进度动画响应式调试