在動態網頁設計領域，利用創新元素來增強使用者體驗是一個至關重要的方面。其中，CSS 滾動進度動畫已成為一種引人注目的技術，它提供了一種具有視覺吸引力的方式，可在瀏覽網頁內容時跟蹤和顯示使用者的進度。網路開發人員將這些動畫整合在一起，創造出一種無縫、直觀的瀏覽體驗。本文將探討 CSS 滾動進度動畫的領域，這是網頁設計中的一種創新方法，可通過具有視覺吸引力和資訊量的滾動指示器和動畫來增強使用者體驗，展示如何將靜態網頁轉化為動態和引人入勝的體驗。
CSS 滾動進度動畫是一種用於建立動態和引人入勝的網頁體驗的新技術。它允許開發人員將動畫與頁面的滾動進度聯絡起來，從而建立與使用者互動直接相關的流暢而高效的效果。通過使用各種 CSS 屬性和過渡效果，網頁開發人員可以將這些動畫整合在一起，從而建立無縫、直觀的瀏覽體驗。這種技術有助於提高網路應用程式的以下效能：
- 使用者參與：通過在滾動時提供視覺化進度反饋，保持使用者的參與度。
- 導航：幫助使用者理解網頁內容的長度和位置。
- 使用者體驗：通過清晰顯示內容的長度和位置，提升整體使用者體驗。
- 可用性：讓使用者更容易瀏覽冗長的網頁。
- 滾動的可視性：直觀地顯示還剩多少內容可讀，減少滾動時的模糊性。
- 增強美感：為網站增添有吸引力的現代視覺元素。
以下是一些使用了 css 滾動進度動畫的網站：
既然我們已經知道什麼是 CSS 滾動進度網頁動畫、它的優點和一些實際例子，那就讓我們自己來製作一個吧。
首先，讓我們建立檔案結構。我們將建立兩個檔案。這兩個檔案分別是 css_scroll_animation.html 和 css_scroll_animation.css 。我們的檔案結構如下
project root
├── css_scroll_animation.html
|
|── css_scroll_animation.css
│
|
project root
├── 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>
<!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>
<!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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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);
}
}
@keyframes slide {
0% {
translate: 0;
}
100% {
translate: calc(-100% - 100vw);
}
}
@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;
}
.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();
}
.wrapper {
display: flex;
position: fixed;
top: 0;
left: 0;
height: 100vh;
animation: slide auto linear;
animation-timeline: scroll();
}
.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 的滾動進度動畫可以豐富使用者體驗，提升網頁介面的視覺動態效果。通過採用這些技術，你可以製作出引人入勝的網頁體驗。
評論留言