MapaCarta -front end developer ve oyun geliştirici(html5 & flash)-

Javascript ve CSS ile dönen kareler yapımı

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:

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");

}

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:

#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);
}

#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.

MapaCarta.
Html5 oyun geliştirici & Front end developer.

Javascript ve CSS ile dönen kareler yapımı

İlgili

Bir cevap yazın Cevabı iptal et

MapaCarta. Html5 oyun geliştirici & Front end developer.

Javascript ve CSS ile dönen kareler yapımı

İlgili

Bir cevap yazın Cevabı iptal et

MapaCarta.
Html5 oyun geliştirici & Front end developer.