![Photo: 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> </header>
အဲဒါျပီးရင္ header ထဲမွာ div တစ္ခုတည္ေဆာက္မယ္ id ကို site_title လို႔ေပးလိုက္မယ္။
<header>
<div id="site_title"></div>
</header>
site_title ထဲမွာ div 15 တည္ေဆာက္မယ္ id မေပးေတာ့ပဲ class နာမည္ကို site_div လို႔ေပးလိုက္မယ္။ခင္ဗ်ားတို႔က ၾကိဳက္သေလာက္ တည္ေဆာက္ခ်င္သလိုတည္ေဆာက္ပါ ။ ကၽြန္ေတာ္ကေတာ႔ BRIGHTER MYANMAR စာလုံးတည္ေဆာက္မွာမို႔လို႔ 15 ခုတည္ေဆာက္တာပါ။
<div id="site_title">
<div class="site_div">B</div>
<div class="site_div">R</div>
<div class="site_div">I</div>
<div class="site_div">G</div>
<div class="site_div">H</div>
<div class="site_div">T</div>
<div class="site_div">E</div>
<div class="site_div">R</div>
<div class="site_div">M</div>
<div class="site_div">Y</div>
<div class="site_div">A</div>
<div class="site_div">N</div>
<div class="site_div">M</div>
<div class="site_div">A</div>
<div class="site_div">R</div>
</div>
HTML အပိုင္းကေတာ႔ ဒီေလာက္ပါပဲ အဲ႔ဒါေတြေရးျပီးရင္ CSS ဖိုင္းခ်ိတ္ေတာ႔ျပီး အလွဆင္ေတာ႔မယ္။
ANIMATION တြင္ပါဝင္ေသာ CSS အခန္းက႑(1)
CSS ဖိုင္းကို HTML မွာ ေအာက္ကျပထားတဲ႔အတိုင္း head ထဲမွာ ခ်ိတ္ဆက္ပါတယ္။
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="style.css" type="text/css" />
</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
brightermyanmar@gmail.com သို႔ စာေရးသားေပးပို႔၍လည္းေကာင္း ေမးျမန္ႏိုင္ပါတယ္ခင္ဗ်ာ။
Brighter Myanmar](https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-prn2/t1/1902975_1421289871450523_1359584067_n.png)
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> </header>
အဲဒါျပီးရင္ header ထဲမွာ div တစ္ခုတည္ေဆာက္မယ္ id ကို site_title လို႔ေပးလိုက္မယ္။
<header>
<div id="site_title"></div>
</header>
site_title ထဲမွာ div 15 တည္ေဆာက္မယ္ id မေပးေတာ့ပဲ class နာမည္ကို site_div လို႔ေပးလိုက္မယ္။ခင္ဗ်ားတို႔က ၾကိဳက္သေလာက္ တည္ေဆာက္ခ်င္သလိုတည္ေဆာက္ပါ ။ ကၽြန္ေတာ္ကေတာ႔ BRIGHTER MYANMAR စာလုံးတည္ေဆာက္မွာမို႔လို႔ 15 ခုတည္ေဆာက္တာပါ။
<div id="site_title">
<div class="site_div">B</div>
<div class="site_div">R</div>
<div class="site_div">I</div>
<div class="site_div">G</div>
<div class="site_div">H</div>
<div class="site_div">T</div>
<div class="site_div">E</div>
<div class="site_div">R</div>
<div class="site_div">M</div>
<div class="site_div">Y</div>
<div class="site_div">A</div>
<div class="site_div">N</div>
<div class="site_div">M</div>
<div class="site_div">A</div>
<div class="site_div">R</div>
</div>
HTML အပိုင္းကေတာ႔ ဒီေလာက္ပါပဲ အဲ႔ဒါေတြေရးျပီးရင္ CSS ဖိုင္းခ်ိတ္ေတာ႔ျပီး အလွဆင္ေတာ႔မယ္။
ANIMATION တြင္ပါဝင္ေသာ CSS အခန္းက႑(1)
CSS ဖိုင္းကို HTML မွာ ေအာက္ကျပထားတဲ႔အတိုင္း head ထဲမွာ ခ်ိတ္ဆက္ပါတယ္။
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="style.css" type="text/css" />
</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 မလုပ္ေတာ႔ဘူး။ အဲ႔ေတြကို ေနာက္ေန႔က်ရင္သင္ျပေပးသြားမွာျဖစ္ပါတယ္။ အားလုံးကိုေက်းဇူးတင္ပါတယ္။
ဒီပို႕စ္ေလးအတြက္ brightermyanmar ကိုအထူး ေက်းဇူးတင္ပါတယ္ ခင္ဗ်ာ. ကၽြန္ေတာ္ ကိုယ္တိုင္လဲ
ဒီလို သင္ခန္းစာမ်ိဳးကို လိုခ်င္ေနလို႕ပါ. အခုေတာ့ အစဥ္ေျပပါပီခင္ဗ်ာ.
အဆင္ေျပပါေစခင္ဗ်ာ........
Myanmar IT Sky
Download အဆင္မေျပရင္ ေက်းဇူးျပဳၿပီးစာေလးေရးၿပီးေျပာခဲ့ပါဗ်ာ.. မိတ္ေတြမ်ားအားလံုး အတြက္ အဆင္ေျပေအာင္အတတ္ႏိုင္ဆံုးၾကိဳးစားေပးပါမယ္ခင္ဗ်ာ။
0 comments:
Post a Comment