วิธีการ - ไอคอนเคลื่อนไหว
เรียนรู้วิธีใช้ไอคอนเพื่อสร้างเอฟเฟกต์ภาพเคลื่อนไหว
การชาร์จแบตเตอรี่
ขั้นตอนที่ 1) เพิ่ม HTML:
ตัวอย่าง
<div id="charging" class="fa"></div>
ขั้นตอนที่ 2) รวมไลบรารีไอคอน Font Awesome:
ตัวอย่าง
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
อ่านเพิ่มเติมเกี่ยวกับ Font Awesome ใน บทแนะนำ Font Awesome
ขั้นตอนที่ 3) เพิ่ม JavaScript:
ตัวอย่าง
<script>
function chargebattery() {
var a;
a = document.getElementById("charging");
a.innerHTML = "";
setTimeout(function () {
a.innerHTML = "";
}, 1000);
setTimeout(function () {
a.innerHTML = "";
}, 2000);
setTimeout(function () {
a.innerHTML = "";
}, 3000);
setTimeout(function () {
a.innerHTML = "";
}, 4000);
}
chargebattery();
setInterval(chargebattery, 5000);
</script>
ตัวอย่างที่อธิบาย
ตัวอย่างนี้ให้ความรู้สึกเหมือนกำลังชาร์จแบตเตอรี่ แต่กลับแสดงไอคอนต่างๆ ห้าไอคอนแทน
ฟังก์ชันที่เรียกchargebattery()
ทำหน้าที่แทนที่และแสดงไอคอนทั้งหมด
ฟังก์ชั่นเริ่มต้นด้วยการแสดงไอคอนแบตเตอรี่เปล่า:
หลังจากหนึ่งวินาที ไอคอนจะถูกแทนที่ด้วยไอคอนใหม่:
ไอคอนนี้จะถูกแทนที่ด้วยไอคอนใหม่ทุกวินาที จนกว่า "แบตเตอรี่จะชาร์จจนเต็ม":
กระบวนการนี้ทำซ้ำทุกๆ 5 วินาที ทำให้ดูเหมือนว่าแบตเตอรี่กำลังชาร์จอยู่
ไอคอนเคลื่อนไหวเพิ่มเติม
ตัวอย่าง
ตัวอย่าง
ตัวอย่าง
ตัวอย่าง
ตัวอย่าง
ตัวอย่าง