![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 แกแแ္แေျแแแ္ ေแ်းแူးျแဳแฟแီးแ ာေแးေแးแฟแီးေျแာแဲ့แါแ်ာ.. แိแ္ေแြแ်ားแกားแံုး แกแြแ္ แกแแ္ေျแေแกာแ္แกแแ္ႏိုแ္แံုးแพแိဳးแ ားေแးแါแแ္แแ္แ်ာ။
