Javascript ve CSS kullanarak üzerine gelince dönen kareler yapımını anlatmaya çalışacağım. Aşağıda uygulamanın tamamlanmış hali mevcut. İmleç ile üzerinde gezindirdikçe karelerin renkleri değişecek.
Öncelikle body’nin içerisine kareler id’li bir div eklememiz gerekiyor.
<div id=”kareler”></div>
Daha sonra javascript kodlarını harici bir js dosyasına ya da html’de script tag’ının içine yerleştirebilirsiniz. Js kodları şu şekilde:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
var kareler=document.getElementById("kareler"); //kare Genişliğini ve bu genişliğe göre satır ve sütunda //kaç tane kare olacağını hesaplıyoruz var kareGenislik=50; var satirSayisi=Math.ceil(kareler.offsetWidth/kareGenislik); var sutunSayisi=Math.ceil(kareler.offsetHeight/kareGenislik); var str=""; ///For döngüsüyle bütün satır ve sütun dolacak şekilde //kareleri ekliyoruz for(var i=0;i< satirSayisi ;i++){ for(var j=0;j< sutunSayisi ;j++){ var posx=j*50; var posy=i*50; str+="<div class='box' style='left:"+posx+"px;top:"+posy+"px'></div>" } } kareler.innerHTML+=str; //imleç ile kareler objesinin üzerine gelinince boxAnimate //sınıfı ekli değilse ekliyoruz, ekliyse siliyoruz. kareler.onmouseover=function(e){ if(e.target==kareler){return} e.target.classList.toggle("boxAnimate"); } |
Javascript kodunu(script tag’ını) oluşturduğumuz div’in altına eklemeniz gerekiyor. Div’den önce eklerseniz hata verecektir. Kodların çoğunda ne yapıldığıyla ilgili açıklama eklemeye çalıştım. Burada
str+=”<div class=’box’ style=’left:”+posx+”px;top:”+posy+”px’></div>”
kısmı yerine createElement de kullanabilirdik ancak kod fazla karışık olmadığı için ve obje eklemenin en kolay yolu innerHTML olduğu için bu yöntemi tercih ettim. Ayrıca her bir objeyi ayrı ayrı innerHTML koduyla eklemek yerine tek seferde eklemek performans açısından daha iyidir. Bu sebeple önce bütün objeleri str isimli bir değişkene ekleyip sonrasında kareler div’imize ekledim.
CSS kısmı ise şöyle:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
#kareler{ width:500px; height: 500px; position: relative; } .box{ width: 50px; height: 50px; position: absolute; background-color: #ccc; transition: all 1s linear; border:1px solid #dedede; transform-style: preserve-3d; backface-visibility: visible; } .box:after { content: ''; right: 0px; bottom: 0px; position: absolute; top: 0px; left: 0px; background: #333; border:1px solid #ccc; transform: rotateY( 180deg ); transform-style: preserve-3d; backface-visibility: hidden; } .boxAnimate{ transform: rotateY(180deg); } |
CSS kısmına henüz yorum ekleyemedim, en kısa zamanda onu da eklemeye çalışırım.