কিভাবে তৈরি করা যায়: অ্যানিমেশন আইকন
আইকন ব্যবহার করে অ্যানিমেশন তৈরি করে শিখুন。
ব্যাটারি চার্জ
প্রথম পদক্ষেপ - HTML যোগ করুন:
<div id="charging" class="fa"></div>
দ্বিতীয় পদক্ষেপ - Font Awesome আইকন লাইব্রেরি যোগ করুন:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
আমাদের Font Awesome টিউটোরিয়াল ফন্ট অউইস সম্পর্কে আরও তথ্য জানুন。
তৃতীয় পদক্ষেপ - 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() এই ফাংশনটি সবগুলি আইকনকে প্রতিস্থাপন এবং দেখানোর জন্য দায়ী।
এই ফাংশনটি প্রথমে একটি খালি ব্যাটারি আইকন দেখায়:
এক সেকেন্ড পর, এই আইকনটি একটি নতুন আইকনে প্রতিস্থাপিত হয়:
প্রতি সেকেন্ডে একটি নতুন আইকন বর্তমান আইকনটির জায়গায় রাখা হয়, পর্যন্ত যখন 'ব্যাটারি পূর্ণভাবে চার্জ হয়':
এই প্রক্রিয়াটি প্রতি ৫ সেকেন্ডে পুনরায় হয়, যা ব্যবহারকারীকে বৈদ্যুতিক ব্যাটারি চার্জ হচ্ছে বলে অনুভব করায়।
