Ikonkalarni animatsiyalash
Ikonkalar yordamida animatsiya effektini yaratishni o‘rganing.
Batareya quvvatlanmoqda
O‘zingiz sinab ko‘ring »
1-qadam) HTML qo‘shing:
Misol
<div id="charging" class="fa"></div>
2-qadam) Font Awesome ikonkalar kutubxonasini ulang:
Misol
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Font Awesome haqida Font Awesome darsligimizda batafsil o‘qing.
3-qadam) JavaScript qo‘shing:
Misol
<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>
O‘zingiz sinab ko‘ring »
Misol tahlili
Misol batareya quvvatlanayotgandek taassurot qoldiradi, aslida esa beshta turli ikonka navbatma-navbat ko‘rsatiladi.
Ikonkalarni almashtirish va ko‘rsatish ishlarining barchasini chargebattery() deb nomlangan funksiya bajaradi.
Funksiya bo‘sh batareya ikonkasini ko‘rsatishdan boshlanadi:
Bir soniyadan so‘ng ikonka yangisiga almashtiriladi:
"Batareya to‘liq quvvatlanguncha" ikonka har soniyada yangisiga almashtirib boriladi:
Bu jarayon har 5 soniyada takrorlanadi va batareya quvvatlanayotgandek tuyuladi.
Boshqa animatsiyali ikonkalar
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!