資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用純 JavaScript 新增淡入效果？
簡介
我們使用淡入效果來吸引使用者注意網站的某些部分，方法是逐漸增加或減少其不透明度。這種不透明度的逐漸變化稱為淡入或淡出效果。當我們逐漸增加不透明度時，它被稱為淡入效果，用於使頁面選定的部分在選定的時間內變得更清晰可見。這建立了一個平滑的過渡，並有助於使我們的網站對使用者而言更具活力和吸引力。
在本文中，我們將探討使用 HTML、CSS 和純 JavaScript 實現淡入效果的幾種方法。
方法
我們可以使用純 JavaScript 實現淡入效果的兩種主要方法是：
使用 clearInterval() 方法
使用 requestAnimationFrame() 函式
讓我們詳細瞭解每種方法。
方法 1：使用 clearInterval() 方法
clearInterval() 方法透過終止使用 setInterval() 設定的以特定間隔遞增不透明度的函式的執行來停止淡入動畫。
語法
clearInterval(intervalID);
讓我們看一個分步示例，以使用 clearInterval() 方法使用純 JavaScript 實現淡入動畫。
示例
步驟 1 - 如果要應用淡入動畫，則需要一個 HTML 元素。
<div id="elementId">Fade in element</div>
步驟 2 - 接下來，在 CSS 中，將元素的初始不透明度設定為 0，以便它最初不可見。讓我們也新增一些其他 CSS，使我們的元素更完善：
#elementId {
width: 100px;
height: 100px;
background-color: gray;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: black;
opacity: 0;
}
步驟 3 - 在您的 JavaScript 中，您將建立一個變數來儲存當前不透明度，然後使用 setInterval() 方法每 10 毫秒將不透明度遞增少量：
let element = document.getElementById("elementId");
let opacity = 0;
let fadeIn = setInterval(() => {
element.style.opacity = opacity;
opacity += 0.01;
}, 10);
步驟 4 - 然後，您可以使用if語句檢查不透明度是否已達到 1（最大值），此時您需要停止動畫：
if (opacity >= 1) {
clearInterval(fadeIn);
}
示例
步驟 5 - 最後，讓我們將所有內容整合在一起：
<!DOCTYPE html>
<html>
<head>
<title>Fade in Animation</title>
<style>
#elementId {
width: 100px;
height: 100px;
background-color: gray;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: black;
opacity: 0;
}
</style>
</head>
<body>
<div id="elementId">Tutorials Point</div>
<script>
let element = document.getElementById("elementId");
let opacity = 0;
let fadeIn = setInterval(() => {
if (opacity >= 1) {
clearInterval(fadeIn);
}
element.style.opacity = opacity;
opacity += 0.01;
}, 10);
</script>
</body>
</html>
在此示例中，我們將 HTML、CSS 和 JavaScript 程式碼都放在一個名為 index.html 的檔案中。HTML 定義了要淡入的元素，CSS 定義了元素的可視屬性，而位於 script 標籤中的 JavaScript 程式碼使用 setInterval 和 clearInterval 方法使元素逐漸增加其不透明度，直到達到最大值。
當您在 Web 瀏覽器中開啟此 HTML 檔案時，它應該會淡入具有灰色背景顏色的元素，其中文字“Tutorials Point”居中且為黑色。
方法 2：使用 requestAnimationFrame() 函式
requestAnimationFrame() 函式允許瀏覽器在下次重繪之前呼叫指定函式來更新 JavaScript 中的淡入動畫，從而實現高效的動畫效能。
語法
requestAnimationFrame(fade);
讓我們看一個分步示例，以使用 requestAnimationFrame() 方法使用純 JavaScript 實現淡入動畫。
示例
步驟 1 - 如果要應用淡入動畫，則需要一個 HTML 元素：
<div id="elementId">Fade in element</div>
步驟 2 - 接下來，在 CSS 中，將元素的初始不透明度設定為 0，以便它最初不可見。讓我們也新增一些其他 CSS，使我們的元素更完善：
#elementId {
opacity: 0;
}
步驟 3 - 接下來，在您的 JavaScript 中，您將建立一個變數來儲存當前不透明度，然後使用 requestAnimationFrame() 函式在每次呼叫時將不透明度遞增少量：
let element = document.getElementById("elementId");
let opacity = 0;
function fade() {
opacity += 0.01;
element.style.opacity = opacity;
requestAnimationFrame(fade);
}
requestAnimationFrame(fade);
步驟 4 - 然後，您可以使用 if 語句檢查不透明度是否已達到 1（最大值），此時您需要透過中斷 requestAnimationFrame 呼叫的遞迴來停止動畫：
if (opacity >= 1) {
return;
}
示例
步驟 5 - 最後，讓我們將所有內容整合在一起：
<!DOCTYPE html>
<html>
<head>
<title>Fade in Animation</title>
<style>
#elementId {
width: 100px;
height: 100px;
background-color: grey;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: black;
opacity: 0;
}
</style>
</head>
<body>
<div id="elementId">Tutorials Pointt</div>
<script>
let element = document.getElementById("elementId");
let opacity = 0;
function fade() {
if (opacity >= 1) {
return;
}
opacity += 0.01;
element.style.opacity = opacity;
requestAnimationFrame(fade);
}
requestAnimationFrame(fade);
</script>
</body>
</html>
您會發現 HTML、CSS 和 JavaScript 程式碼都組合在一個名為 index.html 的檔案中。在這裡，HTML 標識了要應用淡入效果的元素，CSS 設定了其可視屬性，script 標籤中的 JavaScript 使用 requestAnimationFrame 和遞迴來增加元素的不透明度，直到達到最大值。
當您在瀏覽器中開啟此 HTML 檔案時，它將顯示具有灰色背景的元素的淡入動畫，文字“Tutorials Point”位於中心且為黑色。
結論
在本文中，我們瞭解瞭如何使用純 JavaScript 實現淡入效果。淡入效果是一種逐漸增加網頁選定部分的不透明度的方法，使其對使用者更清晰可見。實現此效果的兩種主要方法是使用 clearInterval() 方法和 requestAnimationFrame() 函式。
我們詳細瞭解了每種方法，並提供瞭如何使用它們的逐步示例。這兩種方法都需要使用 HTML、CSS 和 JavaScript，並且可以根據您網站的特定需求進行自定義。有了這些知識，您現在就可以向您的網站新增淡入效果，並使其對使用者而言更具活力和吸引力。
6K+ 瀏覽量
