Kadir GÜNAY' ın Css, Xhtml, jQuery ve Arayüz Geliştirme Güncesi

jQuery ile Bağlantılı Geçişli Sayfa – Slick Transition Page with jQuery

Sayfalarınız arasındaki geçişleri direk değil de biraz daha hoş şekilde ayarlayabilirsiniz.  http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/ adresindeki makalede okuduklarımı deneyerek bu işelimin çok daha kullanışlı olduğunu söyleyebilirim.

Adım 1 – Html Kodunu Eklemek

Ben örnekte sadece 2 fotoğraf ekleyerek denedim. Sizler farklı linkler ile deneyebilirsiniz.

<a href="index.html" class="trans"><img src="330581.jpg" alt="Resim" /></a>

Burada dikkat etmeniz gereken şey a elemanının sınıfıdır. Ben “trans” isimli bir sınıf kullandım. Birazdan jQuery kod bloğunu yazarken bu sınıfa ihtiyacımız olacak.

Adım 2 – Css Kodunu Eklemek

html { background-color:#000000; color:#ffffff; font-family:Arial, Helvetica, sans-serif; font-size:14px;}
 a { color:#CCCCCC;}

ben genel ve basit bir kullanım yaptım. Projenize göre değiştirebilirsiniz.

Adım 3 – jQuery Çekirdek Dosyasını ve Tetikleyiciyi Eklemek

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
 $('body').css("display", "none");
 $('body').fadeIn(2000);
 $('a.trans').click(function(event) {
 event.preventDefault();
 linkLocation = this.href;
 $('body').fadeOut(1000, redirectPage);
 });

 function redirectPage() {
 window.location = linkLocation;
 }
 });
</script>

Body’ e sayfa yüklendiği anda css özelliğini atadık. fadeIn ile 2 saniye içinde yüklettik. Az önce sınıf atadığımız a elemanına bir tıklama işlemi gerçekleşirse eğer işlemi hemen gerçekleştirme dedik. Fakat linkLocation isimli değişkenimize a’ nın href’ ini atadık. Daha sonra ise body elemanına fadeOut işlemini atadık ve 1 saniye içinde kaybolmasını ardından redirectPage fonksiyonunu çalıştırmasını söyledik. redirectPage fonksiyonumuz da linkLocation değişkenine atadığımız hrefi alarak window eylemi ile birleştiriyor. Bu şekilde aynı adres çubuğumuzdaki yol değişiyor ve aynı sayfa içinde işlem yapmamış oluyoruz.

Uygulamaya Ait Örneği Görmek İçin Tıklayınız

Uygulamaya Ait Örneği İndirmek İçin Tıklayınız

Daha detaylı bilgi için -> http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions