CSS + Mootools ile Kayan DIV’ ler
CSS’ in güzelliği ile Mootools’ un kullanılabilirliği birleştiği zaman ortaya çok güzel işler çıkıyor. İşte onlardan birisi de farenizin konumuna göre kayan divler 
Aynı flashda paralax mantığı ile hareket eden bir sistem.
css ve mootools ile yapılmış kayan div örneği
Bu sistemi yapmak çok basit arkadaşlar. Bunun için öncelikle mootools.svn isimli javascript dosyasına ihtiyacımız var. Buradan indirebilirsiniz. Daha sonra ise normal bir html sayfası açıp şu kodları giriyoruz;
<div id="icerik">
<div id="kayanAlan">
<div class="bolum">
Bölüm1
</div>
<div class="bolum">
Bölüm2
</div>
<div class="bolum">
Bölüm 3
</div>
<div class="bolum">
Bölüm 4
</div>
<div class="bolum">
Bölüm 5
</div>
</div>
</div>
icerik ID’ sine sahip alan genel alanımız, kayanAlan ID’ si içeriğimiz olduğu ve faremizin hareketi ile kayan alan, geri kalan alanlarımız ise bolum sınıfı ile tanımlanmış içerik alanlarımız.
Şimdi bu alanlarımızın CSS kodlarını yazalım;
#icerik {
width:780px;
height:440px;
border:10px solid #fff;
overflow:auto;
margin:0 auto;
overflow-x:hidden;
overflow-y:hidden;
}
#kayanAlan {
width:2000px;
height:400px;
padding:20px;
background:#cccccc;
}
.bolum {
margin:0;
width:220px;
float:left;
margin-right:50px;
}
Gördüğünüz gibi genişlik, yükseklik, margin ve border değerlerimiz ile alanlarımızın stillerini ayarladık. Siz bu değerleri kendinize göre değiştirebilirsiniz.
En son olarak ise gelelim ekleyeceğimiz javascript kodlarına. Öncelik olarak javascript kodları hepimizin bildiği gibi <head></head> etiketleri arasına ekleniyor. Daha önce indirdiğimiz mootools.svn dosyasının yolunu belirtip ekliyoruz;
<script src="dizin_yolu/mootools.svn.js" type="text/javascript"><!--mce:0--></script>
Daha sonra ise hemen bir satır altına esas hareketi sağlayacak olan tetikleyici kodlarını ekliyoruz;
<script type="”text/javascript”"><!--mce:1--></script>
Burada dikkat etmeniz gereken tek nokta arkadaşlar $(”) içine yazacağınız değerdir. Bu değer genel divinizin ID’ si ile aynı olmalıdır. Ve yine bu alan da “var scroll2 = new Scroller(’icerik’” sizin genel diviniz ile aynı ID’ ye sahip olmalıdır.
1 Trackback(s)