Bloğumda toplam 12 kategoride yazılmış 316 yazı ve 269 yorum var.

Jquery ile Page Loading Efekti Eklemek

10 sene önce yazıldı, 29.417 kere okundu. 16

Arkadaşlar merhaba. Bugün bloğuma girdim ne var ne yok diye bakarken aklıma geldi böyle bir efekt eklemek. Zaten bu sayfa yüklenirken farketmişsinizdir. Bu yazımda sizlere sayfa arkaplanda yüklenirken ön planda gösterilen yükleniyor ibaresini ve yüklendikten sonra efektli bir şekilde sayfanın gösterilmesini anlatıcam. Şunu söylemek isterim ki; ben java script veya jquery biliyorum diyemem ancak kendimi geliştiriyorum diyelim. Not olarak da eklemeliyim ki; paylaştığım kodlar kendi kodlarım değildir, alıntılar ve derlemeler üzerinde oynanmıştır.

359Az önce de dediğim gibi, aslında mantık basit. Zaten bir çok yol ile bir çok farklı şekilde bu tarz işlemler yapılabilir. Kullanacağımız kodlar body’yi arkaya atıp bahsedilen divi ön plana çıkartıyor ta ki sayfa içindeki tüm ögeler tarayıcımız tarafından yüklenene kadar. Yüklendikten sonra bahsedilen div ortadan kalkıp body eski haline geliyor. Buraya da bir efekt sıkıştırılmış görünüm açısından gayet güzel.

Öncelikle bir ” yükleniyor “ ibaresini içerek hareketli görsele ihtiyacımız var. Bu tarz görselleri bugün biraz aradım ve bir kaynak site buldum. İçerisinde gayet güzel şeyler var. Şuan kullandığım dönen nota gif animasyonu da bu siteden alınma. Aşağıdaki linkten kaynak sitemize gidip bir tane seçip istediğimiz gibi düzenleyip bilgisayarımıza indirmekle başlayalım o halde.

Preloaders.Net

Kendimize güzel bir animasyon seçtiğimize göre, işin kodlama kısmına gelebiliriz. Öncelikle sitemize Jquery‘yi eklememiz gerekiyor. Eğer zaten Jquery nimetlerinden daha önce faydalanmaya başladıysanız bu adımı es geçebilirsiniz. Eğer eklemediyseniz buyrun aşağıdaki kodu  ” </head> “ den önce boş bulduğunuz bir satıra ekleyin.

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

Kodlarımızı ekledikten sonra efektimizi hangi sayfalarda kullanacağımıza karar vermeliyiz. Örneğin bir WordPress temasında header.php , single.php gibi sayfalar bulunur. Aşağıda vereceğim kodları single.php sayfasına eklerseniz sadece yazıları gösterirken efekt aktif olacaktır. Bu yüzden eğer özel bir sayfada göstermeyecekseniz sitenizde hangi sayfaya girilirse girilsin çağırılacak bir kısma ekleyeceksiniz aşağıda verdiğim kodları.

BENZER  Dosyaları Otomatik Algılayan Ücretsiz PHP Dosya Yöneticisi : Cute File Browser

Buraya kadar anladığımıza göre aşağıda verdiğim kodları sitemizde <body> – </body> arasında bir yere ekleyebilirsiniz.

<!-- Preloader -->
<div id="preloader">
    <div id="status">&nbsp;</div>
</div>

   <!-- Preloader -->
<script type="text/javascript">
    //<![CDATA[
        $(window).load(function() { // makes sure the whole site is loaded
            $('#status').fadeOut(); // will first fade out the loading animation
            $('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
            $('body').delay(350).css({'overflow':'visible'});
        })
    //]]>
</script>

Buraya kadar hatasız bir şekilde uyguladığımızı varsayarak devam ediyorum. Sıra geldi CSS kodlarımıza. Aşağıda verdiğim kodları da sitemizdeki style.css ( başka bir ismi de olabilir ) dosyamıza ekleyeceğiz.

/* Preloader */

#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff; /* sayfa yüklenirken gösterilen arkaplan rengimiz */
    z-index:99; /* efektin arkada kalmadığından emin oluyoruz */
}

#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    background-image:url(resimklasorumuz/yukleniyor.gif); /* burası yazının ilk başında bahsettiğimiz animasyonu çağırır */
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px;
}

Kodlarımızı ekledikten sonra eklediğimiz kodları bir gözgezdirin. Yapmak istediğiniz ve kendinizden emin olduğunuz değişiklikleri yapabilirsiniz. Gif animasyonunuzun yolunu doğru girmezseniz animasyon sayfada gösterilmeyecektir. Örnek olarak ” resimklasorunuz/yukleniyor.gif “ olarak değer girdim. O alanı kendinize göre düzenlemelisiniz. ( Tam adres de yazabilirsiniz. Bknz: http://siteniz.com/yukleniyor.gif )

Ancak işlemlerimiz burada bitmedi. Son olarak, sayfa yüklenmeden önce body’miz aşağıya doğru uzadığında sağ tarafta çıkan scrollbar’ı kaldırmalıyız ki animasyonumuz sayfa yüklenirken gösterildiğinde sağda gözükmesin :) Bunu yapmak için yine CSS dosyamızda ” body { .. “ ile başlayan satıra, } işaretinden önce ” owerflow:hidden; “ değerini vermeliyiz.

Aşağıdaki satırın amacı da zaten bu hidden değerini visible yapmak. ( Bu kodu hiç bir yere eklemeyeceksiniz, zaten eklemiştik. )

$('body').delay(350).css({'overflow':'visible'});

Yapacağımız işlemler bu kadar arkadaşlar. Kodlarınızı istediğiniz gibi düzenleyin, hayal gücünüze göre değişiklik yapın. Artık bir ” Loading “ efektine sahipsiniz. Ve artık sayfalarınız Fade efekti ile açılacak.

BENZER  Wordpress'de Yaptığınız Değişiklikler Sitede Görünmüyor mu?

Başka bir makalede görüşmek üzere. Kendinize iyi bakın. Yorum kısmından istediğiniz soruları sorabilirsiniz. Yardımcı olmaya çalışırım. İyi günler dilerim.

Konuyla alakalı bir şeyler yazabilirsin.

MacBook Pro M2 13” İle İkinci Günüm

Merhabalar! Instagram kullanıcı adımı değiştirdikten sonra artık şu blog işine bi el atayım istedim ve yeniden...

8 ay önce. 35 0 Devam Et

Kahramanmaraş Depremi ve Düşüncelerim

Merhaba arkadaşlar. Uzun süredir bir şeyler yazmıyordum, zaten çok nadiren girip bir şeyler yazıp çıkıyorum an...

1 sene önce. 47 0 Devam Et

Asus ROG Strix G513IC 144Hz Dizüstü Bilgisayar ile Yaşadığım Problemler

Öncelikle herkese merhaba! Çok uzun bir süredir bloğum aktif değildi ve artık bişeyler yazmak çizmek için tekra...

2 sene önce. 63 0 Devam Et

Macbook Air 2017’yi Kimlere Tavsiye Edebilirim?

Bir süredir sık sık Macbook Air’i proje işlerinde ve sunumlarda kullanıyorum. Sizlere bu yazımda 2017 model ...

3 sene önce. 111 0 Devam Et

2021’e Girerken Hayata Dair Genel Bir Değerlendirme Yapalım

Merhabalar yeniden! Hemen her yazıya başlarken söylediğim gibi; epeydir bir şeyler yazamıyorum ama yeniden bir şe...

3 sene önce. 59 0 Devam Et

Hakkımda

1994'ün Haziran'ında Beyşehir/Konya'da dünyaya gelmişim. O zamanlar, gerek tombikliğim gerek yeşil gözlülüğüm sebebiyle gören herkes tarafından el üzerinde ( hatta defalarca havaya atılıp tutulma gibi ) tutulmuşum.

Bebekliğim Konya'da bir köyde, çocukluğum İstanbul'da geçti. İstanbul'da başladığım iş hayatına doğduğum yer, Beyşehir'de devam ediyorum.

Uzun yıllar çeşitli firmalarda çalıştıktan sonra 2017’den beri kendi yazılım ve reklam şirketimi kurdum. Geliştirmeye ve değiştirmeye devam ediyoruz.