HTML,CSS3,JAVASCRIPT သုံး ANIMATION PROJECT တည္ေဆာက္ျခင္း အပိုင္း(၂)
Project Name : Animated Header,
Project Detail : ပထမပိုင္းမွာ B တစ္ခုကိုပဲ animation လုပ္လိုက္တာပါ။ အဲ႔ ဒါကလည္း တစ္ခါပဲ ရပါတယ္။ အခုေတာ႔ အားလုံးကို animation လုပ္မယ္။ တစ္ေခါက္ျပီးရင္ refresh လုပ္စရာမလိုပဲ ေနာက္တစ္ေခါက္ ေထာက္ရင္လည္း animation လုပ္ပါမယ္။ background ကို hover (mouse ေထာက္ရင္လည္း ) စာသားေတြက ေနရာမေရြ႕ပဲ ေနာက္ခံ background သက္သက္ ကို css3 နဲ႕ ေျပာင္းပါမယ္။
Learning Time : ၁ နာရီ,
Used Languages : HTML, CSS , CSS3 , JAVASCRITP,
Remark : ဒီ Project ရဲ႕ ေနာက္ဆုံးပိုင္းျဖစ္ပါတယ္။
Lincense : BMLLL;
ANIMATION တြင္ပါဝင္ေသာ CSS အခန္းက႑(3)
ဒီတစ္ခါမွာေတာ႔ Background ကို အနီေရာင္မလိုခ်င္ဘူး ။ အဲ႔ ေတာ႔ Backgrond ကို style လွတာေလး တစ္ခုေျပာင္းမယ္။ အရင္ဦးဆုံး ေအာက္ကလို .site_div ကို background ျပန္ေျပာင္းမယ္။
background:linear-gradient(45deg,#DBEDFF 50%, #000 50%);
background-size:300% 100%;
transition:0.5s;
background:linear-gradient ဆိုတာကေတာ႔ ေနာက္ခံအေရာင္ကို အေရာင္ေရာမယ္။ ကိုယ္႔စိတ္က် သေလာက္ အေရာင္ယူလို႔ရတယ္။ ေလာေလာဆယ္ကေတာ႔ ကြ်န္ေတာ္က ေနာက္ခံအေရာင္ကို ႏွစ္ေရာင္ပဲ ထားမယ္ ။ျပီးရင္ တစ္ေရာင္ပဲျပမယ္။ mouse တင္လိုက္တဲ႔ အခ်ိန္က်မွ ေပ်ာက္ေနတဲ႔ အေရာင္ေလးကို ညာဘက္အေပၚေထာင္႕ကေနက်လာေစမယ္။ အဲ႔ဒါျပီးရင္ အပၚက ေျပာသလိုအေရာင္ ေရာမယ္ဆိုေတာ႔ linear-gradient ရဲ႕ ေနာက္မွာ () ကြင္းစကြင္းပိတ္နဲ႕ အဲ႔ဒီ () ကြင္းစကြင္းပိတ္ထဲမွာ ကိုယ္ထည္႔ခ်င္တဲ႕ အေရာင္ကို ေရးရမယ္။ အခုကၽြန္ေတာ္ထည္႔ထားတာက အစိမ္းႏုေရာင္(#DBEDFF) 50%, အမဲေရာင္(#000)ကို 50% ထည္႔မယ္။ အဓိပၸာယ္ကေတာ႔ background 100% ရွိတဲ႔ ထဲက အစိမ္းႏုေရာင္ကို 50% အမဲေရာင္က 50% ယူမယ္လိုေျပာတာပါ။ သိပ္နားမလည္ရင္ တစ္ေၾကာင္းစီ ေရးျပီးစစ္ၾကည္႕လိုက္ပါ။ စစ္ၾကည္႕ရင္ ပိုနားလည္သြားမယ္။အခု အဲ႔ဒီေၾကာင္းပဲေရးျပီး စမ္းၾကည္႔လိုက္ မယ္။
ဒါေပမယ္႔ ကၽြန္ေတာ္လိုခ်င္တာက အဲ႕လို အေပၚေအာက္မဟုတ္ဘူး။ ညာဘက္ေထာင္က ထြက္လာ တာကို လိုခ်င္တာ။ အဲ႔ေတာ႔ ကြင္းစရဲ႕ ပထမဦးဆုံးမွာ 45deg လွည္႔လိုက္တယ္။ အဲ႔ဒါဆိုရင္ firefox မွာ run ျပီး ၾကည္႔ ၾကည္႔ပါ။
အဲ႔ဒါဆိုရင္ ညာဘက္အေပၚေထာင္႔က အမဲေရာင္ကို background-size နဲ႕ ေဖ်ာက္ လိုက္မယ္။ ဘယ္လို လုပ္ရလည္းဆိုေတာ႔ ပုံမွန္ဆို background-size က 100% ရွိတယ္။ အဲ႔ ဒါဆိုရင္ အစိမ္းႏုေရာင္က ၅၀ရာခိုင္ႏႈန္း အမဲေရာင္က ၅၀ရာခိုင္းႏႈန္း ရွိမယ္။ background-size ကို 200% ထားရင္ေကာ ဘယ္လို ေပၚလာမလည္း။ ပုံမွန္ ဘယ္ညာတို႔ အေပၚေအာက္ တို႔ ဆိုရင္ background-size 100% ထားမယ္ ဆိုရင္ ဘယ္ညာဆိုရင္ သူက ဘယ္ဘက္ကေနစျပေတာ႔ ဘယ္ဘက္က အေရာင္ပဲေပၚမယ္။ ညာဘက္က အေရာင္က ေပ်ာက္သြားမယ္။ အေပၚေအာက္ဆိုရင္လည္း ေပၚက ေကာင္ကို စျပေတာ႔ ေပၚကေကာင္က ေပၚလာမယ္။ ေအာက္ကေကာင္က ေပ်ာက္သြားမယ္။ အခုပုံစံၾကေတာ႔ ညာဘက္အေပၚေထာင္႔ ဆိုေတာ႔ ။ ဘယ္ညာအေနနဲ႕ ၾကည္႔မယ္ဆိုရင္ 200% ထားရင္ေတာင္ သူက အမဲေရာင္က 45deg ေစာင္း ေနတယ္ဆိုေတာ႔ မေပ်ာက္ႏိုင္ဘူး ။ ကၽြန္ေတာ္က လိုက္ညိွရမွာပ်င္းလို႔ 300% လို႔ေပးလိိုက္တယ္။ background-size: 100% 100% ဆိုတာက ေရွ႕က 100% က အလ်ားလိုက္ကိုယူတာျဖစ္ပါတယ္။ ေနာက္က 100% က ေဒါင္လိုက္ကို ယူတာျဖစ္ပါတယ္။အခုက ပုံစက စတုရန္းပုံဆိုေတာ႔ အလ်ားလိုက္ ျဖစ္ျဖစ္ ေဒါင္လိုက္ျဖစ္ျဖစ္ ရာခိုင္ႏႈန္းေျပာင္းျပီးအလုပ္လုပ္လို႔ရပါတယ္။ အခု ကၽြန္ေတာ္က အလ်ားလိုက္ အလုပ္လုပ္မ်ာျဖစ္ပါတယ္။ အခုက အလ်ားလိုက္ကို 300% ထားလိုက္ေတာ႔ ဘယ္လက္ကေန စျပမယ္ ဆိုေတာ႔ အစိမ္းႏုေရာင္ပဲေပၚေတာ႔မွာျဖစ္ပါတယ္။ transition 0.5s ဆိုတာက သူ႔ကို animation လုပ္တဲ႕ အခ်ိန္ပဲျဖစ္ျဖစ္ hover ေထာက္တဲ႕ အခ်ိန္ပဲျဖစ္ျဖစ္ အလုပ္လုပ္ေနတဲ႕ ၾကာခ်ိန္ကို ယူမွာျဖစ္ပါ တယ္။0.5 ဆိုေတာ႔ တစ္စကၠန္႔ရဲ႕တစ္ဝက္ကို ပဲၾကာမွာျဖစ္ပါတယ္။အဲ႔ဒါဆိုရင္ run ျပီး ၾကည္႔ ၾကည္႔ပါ။
အဲ႔ဒါျပီးရင္ေတာ႔ အဲ႔ .site_div ေတြကို hover ေထာက္လိုက္တာနဲ႕ အစိမ္းႏုေရာင္က ဘယ္ဘက္ကို ေရြ႕ျပီး အမဲေရာင္က ညာဘက္အေပၚေထာင္႔ကေနျပီး ဘယ္လက္ကို ေရာက္လာမွာျဖစ္ပါတယ္။ အဲ႕ေတာ႔ ေအာက္ကလို ေရးလိုက္ပါ။
.site_div:hover{
background-position:100% 100%;
color:#fff;
cursor:pointer;
}
အေပၚက အဓိပၸာယ္ကေတာ႔ .site_div ကို hover (mouse) ေထာက္လိုက္တာနဲ႕ background-position ကို100% 100% ထားလိုက္တာ။ background-position:100% 100% ဆိုတာက အေပၚက ရွင္းျပခဲ႕ သလိုပဲ ေရွ႕က 100% က အလ်ားလိုက္ကို ခ်ိန္ညိွလို႔ရျပီး ေနာက္က 100% က ေဒါင္လိုက္ကို ခ်ိန္ညိွတယ္။သူ႔ကိုဘားမွ မထည္႔ထားရင္ ဘယ္ဘက္ အစြန္းကေနျပတယ္။ 10% ဆိုရင္ ဘယ္ဘက္ ကေန 10% ကြာျပီးျပတယ္။ 100% ဆိုရင္ေတာ႔ ညာဘက္အစြန္း ကေနျပတယ္။ ဘယ္ဘက္ 100% ကျပတယ္လို႔ေျပာလည္းရတယ္။ အဲ႔ အလ်ားလိုက္က background-size က 300% ဆိုေတာ႔ ဘယ္ ဘက္က စျပတယ္။ဒါေပမယ္႔ 100% ပဲျပတယ္ဆိုေတာ႔ ။ ညာဘက္က 200% ေပ်ာက္သြားတယ္။ အဲ ႔ ေျပာသြားတဲ႔ 200% ရယ္ ေပၚေနတယ္႔ 100% ရယ္ 300% လုံးရဲ႕ ညာဘက္အစြန္းကျပမယ္ဆိုေတာ႔ အစိမ္းႏုေရာင္က ဘယ္ဘက္ကို ေရြ႕သြားမယ္။ အမဲေရာင္ကေပၚလာမယ္။ တစ္ခန္းမွာ လူေတြတန္းစီေန တယ္ ဘယ္ဘက္ကေနစျပီးတန္းစီၾကတယ္ ဒါေပမယ္႔ လူအရမ္းမ်ားေတာ႔ အခန္းမဆန္႕ဘူး အဲ႕ေတာ႔ ညာဘက္အေပါက္ကေနထြက္ျပီးတန္းစီရတယ္ အဲ႕ ဒါကို အခန္းရဲ႕ အေပၚကေနလွမ္းၾကည္႔ရင္ အခန္း တြင္းမွာ လူေတြတန္းစီေနတာကိုပဲေတြ႔မွာေပါ႔ အခန္းအျပင္မွာတန္းဆီေနတဲ႕ လူေတြကို မေတြ႕ႏိုင္ဘူး။ ဒါေပမယ္ အဲ႔ဒီလူတန္းၾကီးကို အခန္းရဲ႕ညာဘက္အစြန္း ကေနျပန္ျပီးတန္းစီဆိုရင္ ဘယ္ဘက္အစြန္းက လူေတြက ဘယ္ကအေပါက္ကထြက္ျပီးတန္းစီရမွာ ညာဘက္အခန္းတြင္းက လူေတြက ဘယ္ဘက္ကို လိုက္တိုးရမယ္ ညာဘက္ အခန္းအျပင္ကလူေတြက ဘယ္ဘက္ကို ဝင္လာျပီး ညာဘက္အစြန္းလူက ညာဘက္အခန္း ေထာင္႔မွာ ေနရမယ္။ အခုပုံစံကလည္း အဲ႕ ဒီအတိုင္းပါပဲ။ သူတို႔က ျဖည္းျဖည္းခ်င္း ဘာလို႔ေရြ႕သြားလည္းဆိုေတာ႔ ေပၚမွာ transition 0.5s ထားထားလို႔ေလ။ 0.5s စကၠန္႕ဝတ္ အတြင္းမွာ ေျပာင္းလည္း သြားတာပါ။
ဒီေလာက္ဆိုရင္ နားလည္မယ္လို႔ေမွ်ာ္လင္႔ပါတယ္။ ေသေသခ်ာခ်ာေရးျပီး တစ္ေၾကာင္းစီ ေရးျပီး စမ္းသပ္ၾကည္႔ပါ။ ဒါေပမယ္႕ စာလုံးအေရာင္က အမဲေရာင္ျဖစ္ေနတယ္။ mouse ေထာက္လိုက္လို႔ background အမဲေရာင္ျဖစ္သြားရင္ စာလုံးအေရာင္ပါအမဲေရာင္ဆိုေတာ႔ စာလုံးအေရာင္ကို မေတြ႕ ရ ေတာ႔ဘူးေပါ႔။ အဲ႕ ေတာ႔ စာလုံးအေရာင္ကို(color) အျဖဴေရာင္(#fff)ေပးလိုက္တယ္။ cursor:pointer ဆိုတာကေတာ႔ .site_div ကို mouse ေထာက္မိရင္ ပုံမွာဆို link ကလြဲျပီး က်န္တာေတြ ေတာ္ေတာ္ မ်ားမ်ားက စာသားေတြ ထည္႔တာမ်ားေတာ႔ ဒုတ္ေခ်ာင္းေလးပဲျဖစ္ေနတယ္။ အခုက အဲ႔လို ဒုတ္ေခ်ာင္း ေလး မျဖစ္ခ်င္လို႔ .site_div ကို mouse ေထာက္လိုက္မိတာနဲ႕ လက္ပုံေလးေပၚလာပါလိမ္႔မယ္။firefox မွာ run ျပီး .site_div ေတြ ကို ေမာက္ေထာက္ၾကည္႔ပါ။ run ျပီးၾကည္႔ ၾကည္႔ပါ။
ANIMATION တြင္ပါဝင္ေသာ JAVASCRIPT အခန္းက႑(2)
အရင္ဦးဆုံး ပထမပိုင္းမွာ ေရးခဲ႔တဲ႔ Javascript ကုဒ္ရဲ႕ function tt ထဲမွာ ေအာက္ကလို ေရးလိုက္ ပါမယ္။
function tt(){
_('0').style.animation ="b 5s 0s";
_('1').style.animation ="r 5s 0s";
_('2').style.animation ="i 5s 0s";
_('3').style.animation ="g 5s 0s";
_('4').style.animation ="h 5s 0s";
_('5').style.animation ="t 5s 0s";
_('6').style.animation ="e 5s 0s";
_('7').style.animation ="rt 5s 0s";
_('8').style.animation ="m 5s 0s";
_('9').style.animation ="y 5s 0s";
_('10').style.animation ="a 5s 0s";
_('11').style.animation ="n 5s 0s";
_('12').style.animation ="mt 5s 0s";
_('13').style.animation ="at 5s 0s";
_('14').style.animation ="rh 5s 0s";
aa=0;
}
အဓိပၸာယ္ကေတာ႔ ပထမပိုင္းမွာရွင္းျပခဲ႕ တဲ႔အတိုင္းပါပဲခင္ဗ်ာ။ animation name ေတြကေတာ႔ r ဆိုရင္ မေပါ႔ r က ႏွစ္ခုေျမာက္ဆို rt ေပါ႔။ r two လို႔ဆိုလိုတာပါ။ r သုံးခုေျမာက္ဆိုရင္ th ေပါ႔။ r three လို႔ ဆိုလိုတာပါ။အဲ႔ဒါေတြေရးျပီးရင္ သူတို႔ကို လႈပ္ရွားမႈရွိေအာင္ css မွာ animation အတြက္ keyframes ေတြ သြားျပန္ေရးလိုက္ပါမယ္။
ANIMATION တြင္ပါဝင္ေသာ CSS အခန္းက႑(4)
css keyframe ကလည္း ပထမပိုင္းမွာ ရွင္းျပခဲ႕ တဲ႔ အတိုင္းကို တန္ဖိုးနည္းတာမ်ားတာပဲ ကြာသြား တာပါ။ animation name B အတြက္ကေတာ႔ မျပေတာ႔ပါ။ ေအာက္ကလို ေရးၾကည္႔ပါ။
@keyframes r{
0%{transform: rotate(720deg);border-radius:50%;}
25%{transform: rotate(0deg);border-radius:3px}
50%{transform: translate(-250px,-30px) scale(1,1);border-radius:50%}
60%{transform: translate(-250px,-50px) 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 i{
0%{transform: rotate(720deg);border-radius:50%;}
25%{transform: rotate(0deg);border-radius:3px;}
50%{transform: translate(-180px,90px) scale(1,1);border-radius:50%;}
60%{transform: translate(-180px,110px) 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 g{
0%{transform: rotate(720deg);border-radius:50%;}
25%{transform: rotate(0deg);border-radius:3px;}
50%{transform: translate(-640px, 25px) scale(1,1);border-radius:50%;}
60%{transform: translate(-660px,25px) 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 h{
0%{transform: rotate(720deg);border-radius:50%;}
25%{transform: rotate(0deg);border-radius:3px;}
50%{transform: translate(640px,25px) scale(1,1);border-radius:50%;}
60%{transform: translate(660px,25px) 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 t{
0%{transform: rotate(720deg);border-radius:50%;}
25%{transform: rotate(0deg);border-radius:3px;}
50%{transform: translate(180px,90px) scale(1,1);border-radius:50%;}
60%{transform: translate(180px,110px) 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 e{
0%{transform: rotate(720deg);border-radius:50%;}
25%{transform: rotate(0deg);border-radius:3px;}
50%{transform: translate(250px,-30px) scale(1,1);border-radius:50%;}
60%{transform: translate(250px,-50px) 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 rt{
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 m{
0%{transform: rotate(720deg);border-radius:50%;}
25%{transform: rotate(0deg);border-radius:3px;}
50%{transform: translate(-490px,30px) scale(1,1);border-radius:50%;}
60%{transform: translate(-490px,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 y{
0%{transform: rotate(-720deg);border-radius:50%;}
25%{transform: rotate(0deg);border-radius:3px;}
50%{transform: translate(-280px,30px) scale(1,1);border-radius:50%;}
60%{transform: translate(-280px,50px) 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 a{
0%{transform: rotate(720deg);border-radius:50%;}
25%{transform: rotate(0deg);border-radius:3px;}
50%{transform: translate(-205px,-90px) scale(1,1);border-radius:50%;}
60%{transform: translate(-205px,-110px) 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 mt{
0%{transform: rotate(720deg);border-radius:50%;}
25%{transform: rotate(0deg);border-radius:3px;}
50%{transform: translate(205px,-90px) scale(1,1);border-radius:50%;}
60%{transform: translate(205px,-110px) 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 n{
0%{transform: rotate(720deg);border-radius:50%;}
25%{transform: rotate(0deg);border-radius:3px;}
50%{transform: translate(0px,-30px) scale(2,2);border-radius:50%;}
60%{transform: translate(0px,-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 at{
0%{transform: rotate(-720deg);border-radius:50%;}
25%{transform: rotate(0deg);border-radius:3px;}
50%{transform: translate(280px,30px) scale(1,1);border-radius:50%;}
60%{transform: translate(280px,50px) 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 rh{
0%{transform: rotate(720deg);border-radius:50%;}
25%{transform: rotate(0deg);border-radius:3px;}
50%{transform: translate(490px,30px) scale(1,1);border-radius:50%;}
60%{transform: translate(490px,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;}
}
အေပၚက ကုဒ္ေတြကို နားမလည္ရင္ ပထမပိုင္းမွာ ဖတ္ၾကည္႔ပါ။ အဲ႔ဒါဆိုရင္ animation အလုပ္လုပ္ ပါျပီး။ ဒါေပမယ္႔ တစ္ခါပဲရပါတယ္။ ေနာက္တစ္ခါ mouse hover ျပန္လုပ္လို႔မရဘူးျဖစ္ေနတယ္ အဲ႔ဒါကို javascritp နဲ႔ သြားျပန္ေရးလိုက္ပါမယ္။
ANIMATION တြင္ပါဝင္ေသာ JAVASCRIPT အခန္းက႑(3)
ေအာက္ကအတိုင္း လိုက္ေရးလိုက္ပါ။
function rr(){
_('0').style.animation ="none";
_('1').style.animation ="none";
_('2').style.animation ="none";
_('3').style.animation ="none";
_('4').style.animation ="none";
_('5').style.animation ="none";
_('6').style.animation ="none";
_('7').style.animation ="none";
_('8').style.animation ="none";
_('9').style.animation ="none";
_('14').style.animation ="none";
_('13').style.animation ="none";
_('12').style.animation ="none";
_('11').style.animation ="none";
_('10').style.animation ="none";
}
သူကေတာ႔ ပထမပိုင္းမွာ ေရးခဲ႔တဲ႔ header[0].addEventListener('mouseout',rr,false) အတြက္ function တည္ေဆာက္ျပီး function ေရးလိုက္တာျဖစ္ပါတယ္။ အဓိပၸာယ္ကေတာ႔ header ထဲက mouse ထြက္သြားတာနဲ႔ အဲ႔ function rr ထဲ႔က ကုဒ္ေတြက အလုပ္လုပ္မယ္လို႔ ေျပာတာပါ။ function rr ထဲက အဓိပၸာယ္ကေတာ႔ header ထဲက mosue ထြက္သြားတာနဲ႔ သူတို႔နဲ႔သက္ဆိုင္တဲ႔ animation ေတြကို none အလုပ္ဆက္မလုပ္ေတာ႔ဘူး အဲ႔ animation ကို ျဖဳတ္လိုက္တာပါ။function tt ထဲမွာ သတ္မွတ္ထားတဲ႔ animation ေတြကို မရွိေတာ႔ ဘူး ျဖဳတ္လိုက္ျပီးလို႔ေျပာတာပါပဲ။ အဲ႔ဒါဆိုရင္ css3 နဲ႔ ေရးသလို mouse ေထာက္ထားရင္ အလုပ္လုပ္တယ္ mouse ထြက္သြားရင္ ျပန္ညိမ္သြားမယ္။ အခု ကေတာ႔ mouse ေထာက္လိုက္တိုင္းေတာ႔ ျပန္ရပါတယ္။ ဒါေပမယ္႔ mouse ျပန္ထြက္လိုက္တာနဲ႔ ကိုယ္႔လုပ္ထားတဲ႔ animation ေတြက ျပန္ညိမ္သြားတယ္ဆိုေတာ႔ ပရိတ္သတ္က ကိုယ္လုပ္ထားတဲ႔ aniamtion ကို အဆုံးထိမျမင္ရပဲျဖစ္ေနမွာေပါ႔။ အဲ႔ေတာ႔ အဲ႔လို မျဖစ္ဖို႔ကို ကၽြန္ေတာ္က setTimeout ကို သုံးမွာပါ။ setTimeout မသုံးခင္ variable တစ္ခုတည္ေဆာက္ပါမယ္။ ကၽြန္ေတာ္ကေတာ႔ ထိတ္ဆုံး မွာပဲ တည္ေဆာက္လိုက္ပါတယ္။ ျပီးရင္ အဲ႔ variable ရဲ႕ တန္ဖိုးကို 0 လို႔သတ္မွတ္ထားပါတယ္။ သူ႔ကို function ေတြရဲ႕ အျပင္မွာေရးရပါတယ္။ global variable လို႔လည္းေခၚပါတယ္။ global variable ကို ေအာက္က မွာမွ ေသခ်ာ ရွင္းျပထားပါတယ္။ အခုရွင္းျပရင္ ရႈတ္သြားပါလိမ္႔မယ္။
var aa=0;
အဲ႔ဒါျပီးရင္ function tt ရဲ႕ ေအာက္ဆုံးမွာလည္း aa =0 လို႔ ေအာက္ကလို ေရးလိုက္ပါ။
ျပီးရင္ ေအာက္ကလို ထက္ေရးၾကည္႔ပါဦး။
function rr(){
aa++;
if(aa > 5){
_('0').style.animation ="none";
_('1').style.animation ="none";
_('2').style.animation ="none";
_('3').style.animation ="none";
_('4').style.animation ="none";
_('5').style.animation ="none";
_('6').style.animation ="none";
_('7').style.animation ="none";
_('8').style.animation ="none";
_('9').style.animation ="none";
_('14').style.animation ="none";
_('13').style.animation ="none";
_('12').style.animation ="none";
_('11').style.animation ="none";
_('10').style.animation ="none";
clearTimeout(animate);
header[0].reset();
}
var animate =setTimeout('rr()',1000);
}
အရင္ဦးဆုံး function rr() ထဲမွာ setTimeOut('tt()',1000) အဓိပၸာယ္ကေတာ႔ function rr ကို တစ္စကၠန္႔ကို တစ္ခါေခၚမယ္လို႔ေျပာတာ။ အဲ႔ ဒါမွ သူ႔အထဲက ေကာင္ေတြက တစ္စကၠန္႕႔ကို တစ္ခါ အလုပ္လုပ္ႏိုင္မွာျဖစ္ပါတယ္။ ဒါေပမယ္႔ ဘာလို႔ global variable ကို သုံးလည္းဆိုေတာ႔ function ထဲမွာ local variable ကို ေခၚရင္ siteTimeout ကို တစ္စကၠန္႔ တစ္ခါေခၚမယ္ အဲ႔တစ္ခါကို ေခၚတိုင္း local variable ကို တစ္ေပါင္းမယ္ဆိုရင္ ပထမတစ္ခါ တစ္ျဖစ္မယ္ ဒုတိယတစ္ခါလည္း တစ္ပဲျဖစ္မယ္။ ဘာလို႔လည္းဆိုေတာ႔ သူ႔က ေနာက္တစ္ေခါက္ထက္ေပါင္းလိုက္လည္း တစ္နဲ႕ တစ္ေပါင္းတာမဟုတ္ပဲ ။ သူ႔ကို သတ္မွတ္ထားတဲ႔ 0 ကိုပဲ တစ္ေပါင္းမွာျဖစ္လို႔ပါ။ local variable ဆိုတာက သူက သူ႔ကို အုပ္ထား တဲ႔ ေကာင္ေတြထဲမွာပဲအလုပ္လုပ္လို႔ရတယ္။ အဲ႕ေကာင္ေတြရဲ႕ အျပင္က ေနလွမ္းေခၚလို႔ မရဘူး။ မ်ားေသာအားျဖစ္ function တို႔ loop တို႔ မွာ သုံးပါတယ္။ global variable ကေတာ႔ ၾကိဳက္တဲ႔ ေနရာ ကလည္း ေခၚလို႔ရတယ္ ။ setTimeout နဲ႔ တစ္ေပါင္းရင္လည္း တစ္ခါေပါင္းရင္တစ္ ႏွစ္ခါေပါင္းရင္ ႏွစ္သုံးခါေပါင္းရင္သုံး ၾကိဳက္သေလာက္အၾကီမ္ၾကီမ္ေပါင္းလို႔ ရပါတယ္ ။ အဲ႔ဒါေၾကာင္မို႔လို႔ ကၽြန္ေတာ္က global variable ကိုသုံးျခင္းျဖစ္ပါတယ္။ အခု setTimeout နဲ႕ function rr ကို တစ္စကၠန္႕ ကိုတစ္ၾကီမ္ အလုပ္လုပ္မယ္ဆိုေတာ႔ function ထဲမွာ aa++ ဆိုျပီး တစ္စကၠန္႕ ကို တစ္ေပါင္းခိုင္းလို္က္တယ္။ အဲ႔ဒါဆိုရင္ header[0] ထဲက mouse ထြက္သြားတာနဲ႔ setTimeout က အလုပ္လုပ္ျပီး function rr ကို တစ္မိနစ္တစ္ၾကိမ္အလုပ္လုပ္ခိုင္းမယ္။ တစ္မိနစ္တစ္ၾကိမ္အလုပ္လုပ္တိုင္း aa ကလည္း တစ္ေပါင္းေန မယ္။ ျပီးေတာ႔မွ if statement ကိုသုံးမယ္။ if ရဲ႕ အဓိပၸာယ္ကေတာ႔ အကယ္၍ ကိစၥတစ္ခုက မွန္ခဲ႕ရန္ ဒီအလုပ္ကိုလုပ္ esle ဒါမွမဟုတ္ မွားခဲ႕ ရင္ ဟိုအလုပ္လုပ္ဆိုျပီးေျပာတာပါ။ အဲ႕ ေတာ႔ if အကယ္၍ aa က ၅ ထက္ၾကီးရင္ animation ေတြကို အလုပ္မလုပ္ခိုင္းေတာ႔ဘူး ရပစ္ခိုင္းတယ္ဆိုေတာ႔ mouse ထြက္ျပီး ၅စကၠန္႕ ၾကာမွ animation အလုပ္ေတြရပါပစ္မယ္ဆိုေတာ႔ ကၽြန္ေတာ္တို႔ animation လုပ္ ခိုင္းျပီး mouse က header[0] ထဲက ထြက္သြားရင္ေတာင္ animation ကရပ္သြားမွာမဟုတ္ဘူး။ ေနာက္၅ စကၠန္႕ ၾကာမွ animation ကရပ္သြားမယ္။ အဲဒါဆိုရင္ firefox မွာ run ၾကည္႔ပါ ။ ဒါေပမယ္႔ ျပႆနာတစ္ခု က်န္ေသးပါတယ္ အဲ႔ဒါကေတာ႔ ေနာက္တစ္ေခါက္ mouse ျပန္ေထာက္ရင္ အလုပ္မလုပ္ ေတာ႔တာပါပဲ ။အဲ႕ ေတာ႔ ၅ စကၠန္႕ ထက္ၾကီးသြားရင္ setTimeout ကို clear ဖယ္ရွားလိုက္ေတာ႔မယ္ လို႔ေျပာလိုက္မယ္။ အဲ႕ေတာ႔ setTimeout ကိုေပးထားတဲ႕ variable နာမည္ကို clearTimeout ရဲ႕ ကြင္းစကြင္းပိတ္ bracket အဖြင္႔အပိတ္ထဲမွာထည္႔လိုက္မယ္။ ဒါဆိုရင္လည္းမရေသးဘူး။ header[0] ကို reset ခ်ရဦးမယ္။ အဲ႕ ေတာ႔ header[0].reset() ဆိုျပီး clearTimeout ရဲ႕ ေအာက္မွာေရးလိုက္မယ္။ဒါေပမယ္႔ aa ရဲ႕ တန္ဖိုးက 5 ျဖစ္ေနဦးမယ္ အဲ႕ေတာ႔ေနာက္တစ္ေခၚ mouse ျပန္ေထာက္ရင္ အလုပ္ ေတာ႔လုပ္တယ္ ။mouse ျပန္ထြက္သြားရင္ အလုပ္ေတြရပ္သြားဦးမယ္ ။ အဲ႕ဒါေၾကာင္႔မလို႔ function tt အထဲမွာ aa=0 ; သြားေပးလိုက္မယ္။ အဓိပၸာယ္ကေတာ႕ header[0] ကို mouse ေထာက္လိုက္တာနဲ႕ aa =0 ေပးမယ္လို႕ေျပာလိုက္တာပါ။ အဲ႕ဒါဆိုရင္ mouse ျပန္ထြက္တာနဲ႕ setTimeout က ျပန္လည္ ေတာ႔မွာပဲ ။ ဒီေလာက္ဆိုရင္ရွင္းမယ္လို႔ထင္ပါတယ္။အားလုံးပဲ ေက်းဇူးတင္ပါတယ္။
pdf တြင္ ပံုုနွင့္တကြ ေသခ်ာ ရွင္းျပထားပါသည္
Pdf ေဒါင္းရန္ link
ref;BrighterMyanmar
brightermyanmar@gmail.com
--------------------------------------