Design

Audio Wave Preloader Animation

မဂၤလာပါခင္ဗ်။
ကြၽန္ေတာ္ကေတာ့ Spiceworks Myanmar Company တြင္ Web Designer အျဖစ္ ဝင္ေရာက္လုပ္ကိုင္ လ်က္ရွိေသာ စိုင္းေအာင္ႏိုင္ဦး ျဖစ္ပါတယ္။
ဒီတစ္ပတ္မွာေတာ့ Preloader နဲ႔ ပတ္သက္ၿပီး အနည္းငယ္ေဝမွ်ေပးခ်င္ပါတယ္။
Preloader က အရမ္းကိုအသုံးဝင္ပါတယ္။ Website တိုင္းလိုလိုမွာလဲ အသုံးမ်ားၾကၿပီး မတူညီတဲ့ ပုံစံအမ်ိဳးမ်ိဳးနဲ႔ ေရးၾကပါတယ္။
ကြၽန္ေတာ္က CSS Property [animation, animation-delay နဲ႔ @keyframes] ကို အဓိက သုံးၿပီး ေရးထားပါတယ္။


ပုံမွာျပထားတဲ့အတိုင္း HTML Code ေတြကို ကြၽန္ေတာ္ [id selector] နဲ႔ [span tag] ေတြကို သုံးၿပီး ေရးထားပါတယ္။

[ ID Selector #main_preloader ] ကို [ position : relative ] သတ္မွတ္ၿပီး ကြၽန္ေတာ္တို႔ ကစားမယ့္ [span tag] ေတြကို [ position : absolute ] သတ္မွတ္ေပးရပါမယ္။ ထို႔ေနာက္ [ animation property ] ကို [ id #main_preloader ] ကို ျပန္ေခၚၿပီး ပုံမွာ ျပထားတဲ့အတိုင္း second ( စကၠန႔္ ) နဲ႔ ကစားေပးလို႔ရပါတယ္။


[span tag (.loader)] ေတြကို [id] နဲ႔ တြဲေခၚၿပီးေတာ့ [animation-delay property] ကို second (စကၠန႔္) သတ္မွတ္ၿပီး ေရးေပးရပါမယ္။ [animation-delay] ကို second သတ္မွတ္ေပးျခင္းျဖင့္ [@keyframes] မွာ ကြၽန္ေတာ္တို့သတ္မွတ္ထားတဲ့ css property (eg. height, translateX, etc…) ေတြကို စၿပီးအလုပ္လုပ္ေစမယ့္ CSS ပဲ ျဖစ္ပါတယ္။

[@Keyframes] ကေတာ့ ထိုနည္းတူ [id name] နဲ႔တြဲေရးေပးမွသာ animation ေတြက အလုပ္လုပ္ပါမယ္။ ဒီေနရာမွာ ကြၽန္ေတာ္က “Audio Wave Preloader Animation” လုပ္မွာျဖစ္တဲ့အတြက္ @keyframes ကို Percentage ေတြသတ္မွတ္ၿပီး [translateX] နဲ႔ [span] ရဲ႕ [height] [color] ေတြကို ကစားသြားပါမယ္။
ရလဒ္က ပုံပါ ျပထားတဲ့အတိုင္းပဲ ျဖစ္ပါတယ္။


အကယ္၍ Preloader နဲ႔ပတ္သက္ၿပီး ပိုမိုေလ့လာခ်င္ရင္ေတာ့ ေအာက္ပါ Link ကေနမွ အေသးစိတ္ဝင္ေရာက္ေလ့လာလို႔ရပါတယ္ခင္ဗ်။

Link address:
https://webdesign.tutsplus.com/tutorials/creating-a-collection-of-css3-animated-pre-loaders–cms-21978

ဖတ္ရႈေပးတဲ့အတြက္ ေက်းဇူးတင္ပါတယ္ခင္ဗ်။

Hello

Leave a Reply

Your email address will not be published. Required fields are marked *