当前位置：首页 > 编程语言 > 正文内容

掌握CSS滚动进度动画技巧

a811625532年前 (2023-12-22)编程语言13

在动态网页设计领域，利用创新元素来增强用户体验是一个至关重要的方面。其中，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="2345HAO084359a42280d0eb 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="2345HAO59a42280d0ebe087 container">
<h1>Section 1</h1>
<p>Scroll vertically and the images move horizontally</p>
</div>
</section>
<section>
<div class="2345HAO706d9067ad6eb657 container">
<h2>Section 2</h2>
</div>
</section>
<section>
<div class="2345HAO9067ad6eb657b4f6 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 文件后的网站外观。

如果仔细观察 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;
}

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

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

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

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

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

响应式 CSS 设计注意事项

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

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

小结

综上所述，本文介绍了以滚动进度动画为重点的大量实用 CSS 技术。通过剖析其核心优势和应用，我们深入了解了如何通过这些动态特性来增强网页设计。

所介绍的技术揭示了基于 CSS 的滚动进度动画的强大功能。作为行动号召，我强烈建议读者将这些技术整合到自己的网页项目中。在清楚了解这一强大工具的各种优势和潜在用例的基础上，拥抱它吧。

实施基于 CSS 的滚动进度动画可以丰富用户体验，提升网页界面的视觉动态效果。通过采用这些技术，你可以 *** 出引人入胜的网页体验。

扫描二维码推送至手机访问。

版权声明：本文由2345好导航站长资讯发布，如需转载请注明出处。

本文链接：http://2345hao.cn/blog/index.php/post/8138.html

分享给朋友：
返回列表

上一篇：Bun，Node和Deno三者对比分析：谁更加优秀？

下一篇：利用自动编码平台简化前端工作

“掌握CSS滚动进度动画技巧” 的相关文章

宝塔面板教程之监控管理篇

宝塔面板教程之监控管理篇

宝塔面板另外一个特质是，你无需通过Linux命令行来查看服务器各项指标状况，即可以阿里云服务器类似的可视化图表，查看资源使用、负载、CPU占用及内容使用百分比等指标。 默认监控是关闭，有需要的，可以开启，监控数据默认保存30天，可以自行修改，默认监控数据保存在日志，可手动清理该日志。 监控管理，...

宝塔面板教程之软件管理篇

宝塔面板教程之软件管理篇

宝塔面板提供丰富的软件以一键安装，这让服务器环境搭建提供不少的便利性，站长可以根据实际需求快速编译安装以实现不同的功能需求。 软件管理，主要是宝塔提供的一些面板扩展插件。 Nginx Nginx是一个高性能的HTTP和反向代理服务器，具有轻量级、占用内存小，并发能力强等优势。 w...

27个学习PHP的最佳教程（免费和付费资源）

27个学习PHP的最佳教程（免费和付费资源）

对于初学者和那些刚刚进入WordPress开发的人来说，PHP是您可以开始的最佳起点之一。这是一种超级简单直接的语言，使其成为之一，因此相当容易上手，它构成了在线开发的支柱。另外，如果你想在WordPress后端工作，你肯定需要学习它。 但是，如果您不想在昂贵的大学课程上花费数月或数年时间怎么...

Serverless PHP简介：主要功能、用例以及如何在Lambda上开始使用Bref

Serverless PHP简介：主要功能、用例以及如何在Lambda上开始使用Bref

无服务器计算是一种基于云的执行模型，可以将应用程序作为服务托管，而无需维护服务器。 服务提供商维护服务器上的资源分配，并根据实际使用情况向用户收费。焦点转移到一个人正在创建的核心应用程序上，基础设施完全由服务提供商处理。无服务器计算也称为功能即服务 (FaaS)。 换句话说，Serverle...

PostgreSQL与SQL Server之间的16个关键差异

PostgreSQL与SQL Server之间的16个关键差异

市场上有各种各样的数据库可供选择，用户通常可以仔细考虑PostgreSQL与SQL Server，以便为他们的用例找出更好的选择。使用PostgreSQL进行运营的组织可能希望切换到像Microsoft SQL Server这样的数据库，因为它主要迎合不同的数据仓库解决方案、电子商务和其他业务线...

深入了解什么是函数即服务 (FaaS)

深入了解什么是函数即服务 (FaaS)

您可能听说过SaaS，您可能听说过PaaS和IaaS，但您听说过函数即服务 (FaaS) 吗？ FaaS市场正在快速增长。根据Allied Market Research的数据，2018年市场价值 。预计到2026年，这一数字将增长到240亿美元——这意味着该行业将从2020年到2026年以2...

Copyright 2345hao.cn Rights Reserved.琼ICP备2025061540号-1

Powered By Z-BlogPHP. Theme by TOYEAN.

您是本站第465232名访客 今日有8篇新文章/评论