HTML,CSS3, JAVASCRIPT သုံး ANIMATION PROJECT ေလး တစ္ခု တည္ေဆာက္ျခင္း

Project Name : Animated Header,

Project Detail : ဒီ Project မွာေတာ႔ Css3 keyframes နဲ႔ Javascript ေပါင္းျပီးေတာ႔ ကိုယ္႔ ဆိုဒ္ရဲ႕ နာမည္ကို mouse တင္လိုက္တာနဲ႔ animation လုပ္မွာျဖစ္ပါတယ္။ ဒီ Project ေလးကို Css3 keyframes နဲ႔ ေရးလို႔ ရပါတယ္။ ဒါေပမယ္႔ ဒီ Project မွာက javascript ကို အသုံးျပဳျပီး Css3 ရဲ႕ Properties နဲ႕ Values ကၽြမ္းက်င္စြာ ေခၚယူေျပာင္းလဲ အသုံးျပဳတက္ရန္ ရည္ရြယ္ျပီး သင္ျပျဖစ္ပါတယ္။

Learning Time : ၁ နာရီ,

Used Languages : HTML, CSS , CSS3 , JAVASCRITP,
Remark : ဒီ Project ေလး ကို အပိုင္း(၂) ပိုင္း ခြဲသြားမွာ ျဖစ္ပါတယ္။
Lincense : BMLLL;

ANIMATION တြင္ ပါဝင္ေသာ HTML အခန္းက႑

အရင္ဦးဆုံး html နဲ႔ frame တည္ေဆာက္မယ္။

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

</body>
</html>

ျပီးရင္ body ထဲမွာ header တစ္ခုေရးမယ္။

အဲဒါျပီးရင္ header ထဲမွာ div တစ္ခုတည္ေဆာက္မယ္ id ကို site_title လို႔ေပးလိုက္မယ္။

site_title ထဲမွာ div 15 ခု တည္ေဆာက္မယ္ id မေပးေတာ့ပဲ class နာမည္ကို site_div လို႔ေပးလိုက္ မယ္။ ခင္ဗ်ားတို႔က ၾကိဳက္သေလာက္ တည္ေဆာက္ ခ်င္သလို တည္ေဆာက္ပါ။ ကၽြန္ေတာ္ကေတာ႔ BRIGHTER MYANMAR စာလုံးတည္ေဆာက္မွာမို႔လို႔ 15 ခု တည္ေဆာက္တာပါ။

HTML အပိုင္းကေတာ႔ ဒီေလာက္ပါပဲ အဲ႔ဒါေတြေရးျပီးရင္ CSS ဖိုင္း ခ်ိတ္ေတာ႔ျပီး အလွဆင္ေတာ႔မယ္။

ANIMATION တြင္ပါဝင္ေသာ CSS အခန္းက႑(1)

CSS ဖိုင္းကို HTML မွာ ေအာက္က ျပထားတဲ႔အတိုင္း head ထဲမွာ ခ်ိတ္ဆက္ပါတယ္။

CSS ဖိုင္ကို ခ်ိတ္ျပီးရင္ ေအာက္က အတိုင္းေရးလိုက္ပါ။

*{
margin:0;
padding:0;
}
body{
background:rgba(0,0,0,0.1);
}
header{
background:rgba(0,0,0,0.1);
margin:0 auto;
overflow:hidden;
padding:20px 0px;
}

* ဆိုတာက universal selector ျဖစ္ပါတယ္။ သူက အားလုံးကို select မွတ္တာျဖစ္ပါတယ္။ အဲမွာ margin ကို 0px, padding ကို 0px ထားတယ္ ဆိုတာက ပုံမွန္ဆို browser က သူ႔အလိုလို padding ရယ္ margin ရယ္ ျခားထားတာေၾကာင္႔ ျဖစ္ပါတယ္။ အဲ႔ဒီျခားထားတာေတြကို မျခားခ်င္လို႔ 0px ေပး ထားတာပါ။ မေပးထားရင္ ေနာက္က်ရင္ width height ေတြညွိရင္ အခက္အခဲ ေတြတက္လို႔ပါ။

body ကို ေနာက္ခံ အေရာင္(background) ကို rgba နဲ႔ ေပးထားပါတယ္။ rgba ဆိုတာက r ဆိုတာက အနီေရာင္(red), g ဆိုတာက အစိမ္းေရာင္(green), b ဆိုတာက အျပာေရာင္(blue), a ဆိုတာက alpha ျဖစ္ပါတယ္။ အေရာင္ေတြမွာ ပုံမွန္က သုံးေရာင္ ရွိပါတယ္။ အဲသုံေရာင္ကို ေရာလိုက္ရင္ အျခား အေရာင္ေတြ ျဖစ္လာပါတယ္။ အားလုံးကို 0 နဲ႔ 255 ၾကားထဲမွာ ကိုယ္ၾကိဳက္တဲ႔ ပမာဏကို ယူျပီးေရာ ပါတယ္။ အခု ကၽြန္ေတာ္တို႔ က ပန္းခ်ီဆရာ မဟုတ္လို႔ Color pic ကို သုံးျပီ အေရာင္ေတြ ယူပါတယ္။ a ကေတာ႔ ေရာဆက္ထားတဲ႔ အေရာင္ေတြကို 0 နဲ႔ 1 ၾကားမွာ အတိုးအေလွ်ာ႔ လုပ္တာျဖစ္တယ္။ 0 ဆို ရင္ေတာ႔ မျမင္ရေတာ႔ဘူးေပါ႔။ 0.1 ကစျပီး 1 အထိ အဆင္႔ဆင္႔တက္ျပီး အေရာင္ အတိုးအေလွ်ာက္ လုပ္လို႔ရပါတယ္။ a က ေနာက္ခံကို ဓာတ္ပုံေတြထားျပီး လုပ္ရင္ ပိုျပီ ၾကည္႔လို႔ေကာင္းပါတယ္ ။

ovarflow:hidden ဆိုတာက သူ႔ေပးထားတဲ႔ အက်ယ္အဝန္းကေနျပီး ေက်ာ္ထြက္သြားရင္ ေက်ာ္သြားတဲ႔ ေကာင္ေတြကို ဖုံးထားမယ္လို႔ ေျပာတာပါ။

padding:20px 0 ဆိုတာက border နဲ႔ content ၾကားကို အေပၚေအာက္ 20px ေဘးႏွစ္ဖက္ကို မကန္ ဘူးလို႔ေျပာတာပါ။ အခုေလာက္ဆိုရင္ေတာ႔ နားလည္ေလာက္မွာပါ နားမလည္ရင္ေတာ႔ ကၽြန္ေတာ္တို႔ BRIGHTER MYANMAR ရဲ႕ ဒီဇိုင္း ရွင္းျပထားတာေတြ ရွိပါတယ္ အဲ႔မွာ အရင္ဆုံး ဖက္ၾကည္႔သင္႔ ပါ တယ္။

ျပီးရင္ ေအာက္ကအတိုင္း ထက္ေရးလိုက္ပါ။

#site_title{
width:480px;
margin:0 auto;
}
.site_div{
float:left;
background:red;
text-align:center;
width:50px;
line-height:50px;
margin:5px;
border-radius:3px;
font-size:28px;
font-weight:900;
color:#000;
}
.site_div:nth-of-type(9){
margin-left:33px;
}

#site_title{width:480px;margin:0 auto;} ဆိုတာကေတာ႔ id site_div ကို အက်ယ္ 480px ေပးျပီး margin:0 auto ဆိုတာက ေဘးႏွစ္ဖက္ကို ႏွစ္ဖက္အညီအမွ် auto ၾကည္႔ျပီး margin ကန္မယ္ လို႔ ေျပာတာပါ။ သူ႔ကို အုပ္ထားတဲ႔ေကာင္ရဲ႕ ခလယ္မွာေနမယ္ လို႔ေျပာတာပါ။ အေပၚေအာက္ကို မကန္ဘူး လို႔ ေျပာတာပါ။

float:left ဆိုတာက class site_div 15 ခုကို တစ္ခုဆီရဲ႕ ဘယ္ဘက္က float (စီးေမွ်ာမယ္ ကပ္မယ္လို႔ ေျပာတာပါ)။

background ကိုေတာ႔ အနီေရာင္း ေပးထားပါတယ္။

text-align:center ဆိုတာက စာေၾကာင္းေတြကို site_div ရဲ႕ ခလယ္မွာ ထားမယ္လို႔ေျပာတာပါ။

width:50px ဆိုတာက အက်ယ္ 50px ေပးမယ္လို႔ေျပာတာပါ။ 50px ယူမယ္လို႔ေျပာတာပါ။

margin:5px ကေတာ႔ ေလးဘက္လုံးကို 5px ကန္မယ္လို႔ေျပာတာပါ။

border-radius:3px ကေတာ႔ အခု ပုံမွန္ firefox အတြက္ေတာ႔ အဆင္ေျပပါတယ္။ chrome တို႕ ie တို႔မွာေတာ႔ webkit တို႔ ms တို႔ ထည္႔ရေသးပါတယ္။

font-size: 28px က စာလုံးအၾကီး 20px ေပးမယ္လို႔ေျပာတာပါ။

font-weigth:900 ကေတာ႔ စာလုံး အထူအပါး ထဲက အထူလို႔ေျပာတာပါ။ သူက 1 က 599 အထိက ပုံမွန္ပါပဲ 600 က 900 အထိကေတာ႔ အထူပါ။ bold နဲ႔ အတူတူပါပဲ။

color:#000 ကေတာ႔ စာလုံး အေရာင္ကို အနက္ေရာင္ ယူမယ္လို႔ေျပာတာပါ။

.site_div:nth-of-type(9){margin-left:33px;} ကေတာ႔

site_div 15 ခု ထဲက 9 ခုေျမာက္ကို ဘယ္ဘက္ကေန margin 33 px ကန္မယ္လို႔ ေျပာတာပါ။

အခုေတာ႔ CSS ကို ဒီေလာက္ပဲ သုံးထားဦးမယ္ JAVASCRIPT ကုဒ္ေတြနဲ႔ ဆက္ေခၚျပီးမွ keyframes ေတြ ျပန္ထက္ေရးမယ္။

ANIMATION တြင္ပါဝင္ေသာ JAVASCRIPT အခန္းက႑

အခုေရးမယ္႔ javascript ကုဒ္ကေတာ႔ ပညာ သိပ္မပါေတာ႔ internal style နဲ႔ ပဲေရးလိုက္တယ္။ အရင္ ဦးဆုံး ေအာက္ကအတိုင္း လိုက္ေရးလိုက္ပါ။

<script type="text/javascript">
var header =document.getElementsByTagName('header');
var site_div =header[0].getElementsByClassName('site_div');
for(var i=0;i<site_div.length;i++){
site_div[i].id =i;
}
</script>

အထက္မွာ ျပထားတဲ႔အတိုင္း script အဖြင္႔ အပိတ္ေရးပါ။
var header =document.getElementsByTagName('header') ဆိုတာကေတာ႔ document ထဲမွာ ရွိတဲ႔ Elements ေတြရဲ႕ TagName ကို လွမ္းေခၚမယ္ ။ အဲ႔ ေခၚမယ္႔ TagName နာမည္က အခုေခၚခ်င္ တာက header ဆိုေတာ႔ ့TagName က header လို႔ေျပာလိုက္တာ။ အဲ႔ဒါဆိုရင္ array ေတြနဲ႔ က်လာ မယ္။ ဘာလို႔လည္းဆိုေတာ႔ html ထဲမွာ က tag ေတြအမ်ားၾကီးပဲ ရွိတယ္ေလ ။ header nav section article footer div p အမ်ားၾကီးပဲ ရွီတယ္ ။ ျပီးရင္ header ႏွစ္ခုရွိရင္ရွိမယ္ ၁၀ခုရွိရင္ရွိမယ္ ။ အဲ႔ေတာ႔ သူက ဘယ္ႏွစ္ခုပဲရွိရွိ array နဲ႔ပဲ ျပန္ေပးတယ္။ array နဲ႔ ေပးရင္ 0 ကစတယ္။ ပုံမွန္ေရရင္ တစ္က စေရေပမယ္။ array ဆိုရင္ေတာ႔ 0 က စေရပါတယ္။ အဲ႔ခု ကၽြန္ေတာ္႔ဆီမွာ ရွိတာက header တစ္ခုပဲ ဆိုေတာ႔ header[0] ေပါ႔။ အကယ္၍ header ႏွစ္ခု ရွိတယ္ဆိုရင္ header[0],header[1] ဆိုျပီးရမယ္။ အခုက တစ္ခုပဲဆို ေတာ႔ တစ္ခုပဲေပါ႔။ header လွမ္းေခၚျပီးျပီ ဆိုရင္ အဲ႔တန္ဖိုးေတြ အားလုံးကို variable တစ္ခုနဲ႔ assign လုပ္မယ္။ assign လုပ္တယ္ဆိုတာ တန္းဖိုးတစ္ခုကို ကိုယ္စလွယ္ယူတာျဖစ္ပါတယ္။

var site_div =header[0].getElementsByClassName('site_div') ဆိုတာကေတာ႔ ေစာေစာက ေျပာ ခဲ႔တဲ႔ အတိုင္း ရလာတဲ႔ header[0] ထဲက Elements ေတြထဲက site_div ဆိုတဲ႔ Class ရွိတဲ႕႔ ေကာင္ကို ယူမယ္လို႔ေျပာတာ။ HTML ဖိုင္းမွာ ေရးခဲ႔တာက site_div ဆိုတဲ႔ Class ရွိတဲ႔ div 15 ခုေတာင္ရွိတယ္။ဒါေပမယ္႔ ေစာေစာက ေျပာခဲ႔တဲ႔ အတိုင္း သူလည္း array နဲ႔ က်လာမယ္။

for(var i=0;i < site_div.length;i++){site_div[i].id =i;} ကတာ႔ class ေတြက array နဲ႔ က်လာ တယ္ ဆိုေတာ႔ အဲ႔ array ေတြကို တစ္ခုခ်င္းစီ လိုက္ေရးရင္ ရပါတယ္။ ဒါေပမယ္႔ အဲ႔လိုဘယ္သူမွ မေရး ၾကပါဘူး အခ်ိန္ကုန္တယ္ ပညာမပါဘူး။ အဲ႔ေတာ႔ for loop ကိုသုံးရပါတယ္။ for loop က variable တစ္ခုသတ္မွတ္မယ္။ အဲ႔ေကာင္က i ။ i ရဲ႕ တန္ဖိုးကို 0 လို႔ေပးတယ္။ အကယ္၍ i က
site_div.lenght ထက္ ငယ္ရင္ ဆိုတာက site_div က array နဲ႔ ရမယ္ဆိုေတာ႔ 15 ခုရမယ္ ။ .length ဆိုတာက ဥပမာ အိမ္တစ္အိမ္ မွာ လူ ၁၅ ေယာက္ရွိတယ္ ေယာကၤ်ားေတြပါမယ္ မိန္းမေတြပါမယ္ ကေလးေတြပါမယ္ အားလုံးေပါင္း ၁၅ ေယာက္ရွိတယ္။ အဲ႔ အိမ္မွာ လူဘယ္ႏွစ္ေယာက္ ရွိလည္းဆိုရင္ ၁၅ ေယာက္ရွိတယ္လို႔ေျဖမယ္။ အဲ႔လိုသေဘာမ်ဳိးပဲ။ အခုလည္း site_div က ၁၅ ခု ရွိတယ္ ဆိုေတာ႔
i က ၁၅ ထက္ငယ္ရင္ i ကို တစ္စီတိုးသြားမယ္။ ++ဆိုတာက တစ္စီတိုးမယ္လို႔ေျပာတာပါ။ အဲ႔ေတာ႔ site_div[i] ဆိုရင္ ပထမတစ္ေခါက္
site_div[0] ဒုတိယတစ္ေခါက္က site_div[1] နဲ႔ အစဥ္ တစ္တိုးျပီးေခၚသြားမယ္။ အဲ႔ ရတာတဲ႔ site_div[i] ေတြကို id သတ္မွတ္မယ္။
အဲ႔ေတာ႔ site_div[i] ရဲ႕ id ကို i လို႔ သတ္မွတ္လိုက္မယ္။ site_div[0] ရဲ႕ id က 0 ျဖစ္သြားမယ္။ site_div[1] ရဲ႕ id က 1 ျဖစ္သြားမယ္။အဲ႔ ဆက္တိုက္ တိုးသြားမယ္။ ေနာက္က်ရင္ ကၽြန္ေတာ္ အကုန္ လုံးကို သင္ခန္းစာအျဖစ္ တစ္ခန္းစီရွင္းျပီး သင္ျပသြားမယ္။ ေလာေလာဆယ္ေတာ႔ အခုေျပာတဲ႔ အတိုင္း ပဲ မွတ္ထားလိုက္ပါ။ အခု id သတ္မွတ္ျပီးျပီဆိုေတာ႔ အဲ id ေတြကိုေခၚျပီး animation လုပ္ျပီး ေစာေစာ က div 15 ခု ကို လႈပ္ရွားခိုင္းေတာ႔မယ္။ အခုရွင္းျပတာ နားမလည္ဘူးဆိုရင္ ေက်းဇူးျပဳျပီး video ဖိုင္ကို ေဒါင္းျပီး ေလ႔လာၾကည္႔ပါ။ အဲ႔ဒါျပီးရင္ ေအာက္ကအတိုင္း ထပ္ေရးလိုက္ပါ။

function _(elem){
return document.getElementById(elem);
}

ဆိုလိုတာကေတာ႔ document.getElementById ဆိုတဲ႔ document object ကို အမ်ားၾကီး မေရးခ်င္လို႔ function နဲ႔ ျပန္ေခၚလိုက္တာ ျဖစ္ပါတယ္။ သူက function တစ္ခုေခၚတယ။္ နာမည္က _ ျဖစ္တယ္။ အဲ႔ _ ထဲမွာ argument တစ္ခုပါတယ္။ အဲ႔ function က return တစ္ခုေပးမယ္။ ဘာကို retrun ေပးလည္း ဆိုေတာ႔ document ဆိုတဲ႔ ့HTML document ထဲက Element တစ္ခုရဲ႕ id ကို ပါ။ ေခၚမယ္႔ id name က elem ဆိုျပီး အေပၚက argument ကို ထည္႔လိုက္တယ္။ အဲ့ဒီ့ argument ကို function ကိုေခၚရင္ ေခၚတဲ့ ေနရာကေန ထည့္ေပးပီးေခၚရတာ၊ ဥပမာ ကၽြန္ေတာ္တို႔ ထည္႔ခ်င္တဲ႔ id name က ss ဆိုရင္ Argument ေနရာမွာ ss ကို ထည္႔လိုက္တာနဲ႔ document.getElementById('ss') လို႔ေရးစရာ မလိုပဲ _(ss) ဆိုျပီး ေရးလိုက္ယုံနဲ႔ ရသြားမယ္။ ဘာလို႔လည္းဆိုေတာ႔ ကၽြန္ေတာ္တို႔က _(elem) ဆိုျပီး အေပၚမွာ function ေရးထားျပီးသား ျဖစ္ေနလို႔ပဲ။ ျပီးရင္ header ကို ေထာက္လိုက္တာနဲ႔ animation ကို အလုပ္လုပ္ခိုင္းမယ္ ဆိုေတာ႔ addEventListener နဲ႔ နားေထာင္မယ္။ addEventListener ဆိုတာ ကေတာ႔ ပရိတ္သတ္က mouse ေထာက္ရင္လား mouse တင္ရင္လား click ႏွိပ္ရင္လား ဆိုတာေတြကို နားေထာင္တာပါပဲ။ သူ႔မွာက parameter သုံးခုပါတယ္။ ပထမတစ္ခုက click မွာလား mousedown မွာလား keypress မွာလား ဆိုျပီး ထည္႔ရတာပါ။ အခု က mouse တင္တာနဲ႔ ထြက္တာနဲ႔ ဆိုေတာ႔ mouseover ရယ္ mouseout ရယ္လို႔ ေရးလိုက္တယ္။ ဒုတိယ Parameter မွာ mouseover Action ျဖစ္ေပၚလာတာနဲ႔ ေခၚလိုတဲ့ function ကို ထည့္ေပးရတယ္ ။တတိယတစ္ခုကေတာ႔ browser default action ကိုတားတာျဖစ္ပါတယ္။ browser default action ဆိုတာက browser ေတြမွာ ၾကိဳတင္ေရးထား တဲ႔ ကုဒ္ေတြရွိတယ္။ mousemove ရင္ ဘာလုပ္ link ကိုႏွိပ္ရင္ ဘာလုပ္ ဆိုျပီး ေရးထားတာေတြပါ။ အဲ႔ဒါေတြကိုကၽြန္ေတာ္တုိ႔က အလုပ္ မလုပ္ေစခ်င္ဘူး ကၽြန္ေတာ္တို႔ခိုင္းတာကိုပဲ လုပ္ေစခ်င္တယ္။ ဒါ႔ေၾကာင္႔ browser default action ကို တားထားတာ ျဖစ္ပါတယ္။ ကုဒ္ကေတာ႔ ေအာက္အတိုင္းျဖစ္ ပါတယ္။

header[0].addEventListener('mouseover',tt,false);
header[0].addEventListener('mouseout',rr,false);

အရင္ဦးဆုံး mouse ေထာက္ရင္ funciton ေခၚမယ္ဆိုေတာ႔ function နာမည္ျဖစ္တဲ႔ tt ကိုေရးမယ္။

function tt(){

}

ျပီးရင္ function ထဲမွာ ကိုယ္လုပ္ခ်င္တဲ႔ အလုပ္ကို ထည္႔ေတာ႔မယ္။ အခုလုပ္ခ်င္တာက animation လုပ္ခ်င္တာ ဆိုေတာ႔ ပထမဦးဆုံး site_div[0] ကို animation လုပ္မယ္လို႔ ေရးမယ္။ site_div[0] ရဲ႕ id က 0 ျဖစ္မယ္ ဆိုေတာ႔ id 0 ရဲ႕ style animation ကိုယ္ေရးမယ္။ css ကို javascript နဲ႔ေရးတာျဖစ္ တယ္။ အဲ႔ေတာ႔ ေအာက္ကလိုေရးလိုက္မယ္။

function tt(){
_('0').style.animation
}

ျပီးရင္ animation name ကိုေရးရမယ္ name မေရးရင္ css က keyframes က ဘယ္သူ႔ကို ေခၚရ မလည္း မသိဘူးျဖစ္ေနလိမ္႔မယ္။ ျပီးရင္ animation လုပ္ရင္ duration(ၾကာခ်ိန္) ထည္႔ေပးရမယ္။ animation လုပ္တဲ႔ အခ်ိန္က ဘယ္ေလာက္ ယူမွာလည္းဆိုတဲ႔ အခ်ိန္ေပါ႔။ ျပီးရင္ သူ႔ကို ဘယ္အခ်ိန္မွာ ျပမလည္းဆိုတဲ႔ delay (ျပသခ်ိန္) လည္း လိုတယ္။ အဲ႔ ဒါေတြကို ေအာက္ကလို ေရးလိုက္မယ္။

function tt(){
_('0').style.animation:"b 5s 0s";
}

အေပၚက အဓိပၸာယ္ကေတာ႔ site_div[0] ျဖစ္တဲ႔ ပထမဦးဆုံး div ကိုယ္ေခၚမယ္။ သူ႔ရဲ႕ id name က 0 ဆိုေတာ႔ document.getElementById('0') ဆိုျပီးေရးရမယ္။ ဒါေပမယ္႔ အေပၚက function _(elem) ကို သုံးျပီး _('0') ဆိုျပီး ကၽြန္ေတာ္က ေရးလိုက္တယ္။ elem ေနရာမွာ 0 ကို ထည္႔သုံးလိုက္တာျဖစ္ တယ္။ အဲ႔ _('0')ရဲ႕ style.animation နာမည္ကို b လို႔ေပးလိုက္တယ္။ ၾကာခ်ိန္ကို 5 second ေပးလိုက္ တယ္။ ျပသခ်ိန္ကို ကို 0 second ဆိုေတာ႔ ခ်က္ခ်င္းျပမယ္လို႔ ဆိုလိုတယ္။ ျပသခ်ိန္ကို မထည္႔လည္း ရတယ္။ ဒါေပမယ္ ေနာက္က်ရင္ ကိုယ္က တစ္ခုခ်င္းစီ အလုပ္လုပ္ခ်င္တယ္ ဆိုရင္ေတာ႔ ျပသခ်ိန္ ထည္႔တာ ပိုေကာင္းတယ္။ အခုကေတာ႔ မထည္႔လည္း ျပႆနာမရွိဘူး။ ဒါဆိုရင္ သူ႔ကို css keyframes နဲ႔ အလုပ္လုပ္ခိုင္းေတာ႔မယ္။keyframe ကို ႏွစ္မ်ိဳးေရးလို႔ရတယ္။ ပထမတစ္မ်ဳိးက ပုံစံတစ္ခုမွ အျခားေျပာင္း လဲခ်င္တဲ႔ ပုံစံတစ္ခုဆီသို႔ ဆိုျပီး from{} to{}ဆိုျပီး လုပ္ခ်င္တာကို {} ထဲမွာေရးတယ္။ ေနာက္ပုိင္း design သင္ခန္းစာမွာ ရွင္းရွင္းလင္းလင္း သင္ျပထားမွာပါ။ ေနာက္တစ္ခုက အလုပ္လုပ္ခ်င္တာက နည္းနည္းမ်ားရင္ % နဲ႔ပဲ လုပ္မယ္။ အခုလုပ္ခ်င္တာက နည္းနည္းမ်ားေတာ႔ % နဲ႔ ပဲေရးမယ္။ အဲ႔ဒါကို css မွာ ေအာက္ကလို ေရးလိုက္ပါ။

ANIMATION တြင္ ပါဝင္ေသာ CSS အခန္းက႑(၂)

@keyframes b{
0%{transform: rotate(720deg);border-radius:50%;}
25%{transform: rotate(0deg);border-radius:3px;}
50%{transform: translate(-450px,-30px) scale(1,1);border-radius:50%;}
60%{transform: translate(-450px,-30px) scale(0,0);border-radius:3px;}
75%{transform: translate(0px,0px) scale(0,0);border-radius:3px;}
100%{transform: translate(0px,0px) scale(1,1);border-radius:3px;}
}

အေပၚကစာရဲ႕ အဓိပၸာယ္ ကေတာ႔ keyframes က ေပၚမွာေပးထားတဲ႔ animation name ျဖစ္တဲ႔ b ကို ေခၚလိုက္တယ္။ သူ႔ကို 0% ႏႈန္းကစျပီး transform:rotate(720deg); ရယ္ border-radius:50% ရယ္ အလုပ္လုပ္မယ္။ rotate ဆိုတာက လွည္႔မယ္လို႔ေျပာတာ။ 720deg ဆိုတာက ဒီဂရီ ၇၂၀ လွည္႔မယ္လို႔ ေျပာတာ။ border-radius ဆိုတာက ေဘာင္ေတြကို ေကြးမယ္။ ဘယ္ေလာက္ ေကြးမလည္းဆိုေတာ႔ ၅၀ ရာခိုင္ႏႈန္း ေကြးမယ္လို႔ေျပာလိုက္တယ္။ ၅၀ ရာခုိင္ႏႈန္းဆိုရင္ သူက စတုရန္းပုံျဖစ္ေနမယ္ဆိုရင္ စက္ဝုိင္း ပုံစံျဖစ္သြားမယ္။စတုရန္းမဟုတ္ဘဲ တစ္ျခားပုံဆိုရင္ေတာ႔ သူ႔ ပုံအလိုက္ေျပာင္းမွာေပါ႔။ ေလာေလာဆယ္
ကၽြန္ေတာ္ေပးထားတာက စတုရန္းဆိုေတာ႔ စတုရန္းပုံကေန စက္ဝုိုင္းပုံေလးအထိကို ၇၂၀ ဒီဂရီလွည္႔ မယ္။ 25% ကေတာ႔ သူက 25% ေရာက္သြားရင္ rotate ကို 0deg ထားလိုက္တယ္ ဆိုေတာ႔ မလွည္႔ ေတာ႔ဘူးေပါ႔။ border-radius ကိုလည္း စက္ဝိုင္းပုံကေန စတုရန္းပုံကို 3px စီပဲ ေကြးလိုက္ေတာ႔ မယ္ေပါ႔။ ဆိုလိုတာက စတုရန္းပုံေလးက လွည္႔မယ္ စတုရန္းပုံကေန စက္ဝိုင္းပုံအထိ စက္ဝိုင္းပုံကေန စတုရန္းပုံအထိ ကို % နဲ႕ ၂၅% ၾကားထဲမွာ ၇၂၀ ဒီဂရီ လွည္႔ျပီး အလုပ္လုပ္မယ္လို႔ေျပာတာ။၅၀% မွာေတာ႔ transform: translate(-450px,-30px) scale(1,1);border-radius:50% ဆိုတာက translate(-450px,-30px) အလုပ္လုပ္မယ္။ -450px ဆိုတာက ဘယ္ဘက္ကို 450px ေရြ႕မယ္လို႔ ေျပာတာ -30 ကေတာ႔ အေပၚကို 30px ေရြ႕မယ္လို႔ေျပာတာ။ အဲဒါဆိုရင္ ညာဘက္ဆိုရင္ - ထည္႔စရာ မလိုေတာ႔ဘူးေပါ႔။ ေအာက္ဆိုရင္လည္း အတူတူပဲ။ scale ဆိုတာက ပုံရဲ႕ အေသးၾကီးခ်ိန္တာပါ။ ၁ ကေတာ႔ ပုံမွန္အရြယ္အစား ျဖစ္ပါတယ္။ ၁ထက္ၾကီးရင္ေတာ႔ ပုံမွာ အရြယ္အစားထက္ၾကီးမယ္။ ငယ္ရင္ ေတာ႔ ေသးမယ္ေပါ႔။ 1.1 to 1.9 ဆိုျပီး ဒႆမကိန္းနဲ႔လည္းေပးလို႔ရတယ္။0 ဆိုရင္ေတာ႔ ေပ်ာက္သြား မွာေပါ႔။ ဒါဆိုရင္ firefox မွာ run လို႔ ရပါျပီ။ header ကို mouse ေထာက္မိတာနဲ႔ ပထမဦးဆုံး b က အလုပ္ လုပ္ပါလိမ္႔မယ္။ အခု သင္ခန္းစာကေတာ႔ ဒီေလာက္ပါပဲ ။ ေနာက္ေန႔က်ရင္ အဲ႔ဒါကို ထက္ျပီး javascrip ရယ္ css ရယ္ သုံးျပီး က်န္တဲ႔အရာေတြကို အလွဆင္မယ္ အခုကေတာ႔ mouseover ေထာက္ရင္ တစ္ခါပဲရေသးတယ္။ mouseout ျပီးျပန္ဝင္ရန္ animation မလုပ္ေတာ႔ဘူး။ အဲ႔ေတြကို ေနာက္ေန႔က်ရင္ သင္ျပေပးသြားမွာ ျဖစ္ပါတယ္။ အားလုံးကို ေက်းဇူးတင္ပါတယ္။

ဒီပိုုစ့္ကိုု pdf ဖိုုင္ အျဖစ္ ေဒါင္းလုုဒ္လုုပ္လိုု ပါက ေအာက္ပါ လင့္တြင္း ေဒါင္းလုုပ္ရယူႏုုိင္ပါသည္

http://goo.gl/0bcZjY

ဒီ project code ကိုု ေအာက္က လင့္ မွာ ေဒါင္းပါ

http://goo.gl/7fl5zy

ref;Brighter Myanmar

brightermyanmar@gmail.com

--------------------------------------
ကိုမ်ဳိး(lwanmapyay.blogspot.com) လြမ္းမေျပ သုတရပ္၀န္း | Facebook

HTML,CSS3, JAVASCRIPT သုံး ANIMATION PROJECT ေလး တစ္ခု တည္ေဆာက္ျခင္း

ဆက်စပ်ဖတ်ရှုရန် အကြောင်းအရာများ...