Yazıyı görüntülüyorsunuz Bloğumdaki toplam 12 kategoride yazılmış 292 yazıdan en güncelleri gösteriliyor. 28.6.2017
Bu yazı 07.02.2014 tarihinde yazıldı. O günden bu güne bir çok şey değişmiş ve yazı geçerliliğini yitirmiş olabilir.

Jquery ile Page Loading Efekti Eklemek

3 sene önce yazıldı, 11.968 kere okundu. 12

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.

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  Wordpress'de Yaptığınız Değişiklikler Sitede Görünmüyor mu?

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

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.

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 )

BENZER  Webde Kullanilan Favori Fontlar Nelermis?

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

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.

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.

  • İsmail furkan KADAYIFCI

    merhaba;

    Bu konu ile alakalı değil ama kendim çözemedim internettede ing. anlatımları pek anlamadım ben bir onepage sayfa tasarladım menüleri divlere bağladım oralara basıldığı zaman gidiyor fakat direk atlıyor anasayfada ben bunu yavaş bir şekilde yapmak istiyorum javascript kodlarını yazıyorum indexime çağırıyorum ama bir türlü yapamadım kayarak gitmiyor sayfa bana yardım edermisiniz.

    furkankadayifci@gmail.com

    • Merhabalar,

      Elbette yardımcı olmaya çalışayım. “jquery scroll effect” diye aratırsanız sanırım kullanabileceğiniz araçlar çıkar karşınıza. bir kaç tanesini deneyebilirsiniz. en son kullandığım jquery efektini bulabilirsem yorumu düzenlerim yine. en kötü ihtimalle iletişim bilgilerimden ulaşın ilk müsait zamanda birlikte bir daha bakalım :)

      Yorumunuz için teşekkürler,
      İyi günler dilerim.

  • kaan

    Fade efekti uyguluyor ama gif gözükmüyor farklı gifler denedim yine olmadı. Yolu kontrol ettim kaç kez ama yine çözüm yok. Farklı bir püf noktası var mı?

    • merhabalar, herşeyi eksiksiz yaptığınızı varsayarsak eğer muhtemelen dosya yolunu yanlış yazıyor olabilirsiniz. tam adresi yazmayı deneyin css de. örneğin ” http://siteadresi.com/resimler/yukleniyor.gif ” şeklinde girebilirsiniz. deneyin olmazsa tekrar belirtirseniz yardımcı olayım :)

      yorumunuz için teşekkürler. iyi günler dilerim

      • kaan

        İnternet adresi verince olmuştu denemiştim bunu teşekkürler ama localde neden olmadı anlamadım.Neyse böylede idare ederiz artık :) Efekt çok güzel olmuş yumuşak bir geçiş sağlıyor. Anlatımınız için teşekkürler.

  • Fatih Uslu

    Anlatım için teşekkürler. Emeğinize sağlık
    Bu da daha kısa bir yolu. :)

    CSS KDOLARI
    .tren {
    background-image: url(‘tumblr_nox9tcWoq01rsx00qo1_500.gif’);
    z-index: 100;
    background-position:center;
    position:fixed;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-color: #000;
    width: 100%;
    height: 100%;
    }
    —————————————————–
    SCRIPT KODLARI

    function load() {
    $(“.tren”).removeClass(“hidden”);
    }
    window.onbeforeunload = load;

    ————————————————————
    HTML KODLARI

  • Ziya Pektemek

    merhaba, uzun zamandır jquery ile sayfa yüklendiğinde loading yapacak bir jquery preloader arıyordum ama bu kadar basit ve kullanışlısını bulamamıştım. teşekkür ederim emeğine sağlık

    • Ben teşekkür ederim, işinize yaradıysa ne mutlu. :)

  • helenia hexon

    iyi bayramlar . Siteme loading page ekledim fakat anasayfa içinde kaldı benim istediğim siteye girmeden once 2-3 saniye bekleyip ardından siteye yönlendirsin .yükleniyor dosyasını internetten hazır olarak indirdim içerigi css ve js dosyaları birde index var içeriklerini hangi komutlar arasına atmalıyım ?

    • Sorunuzu tam olarak anlayamadım, daha açıklayıcı olursanız yardımcı olmaya çalışayım.

  • fabrika sanat

    Merhaba… İsmim İnan… Öncelikle makaleniz için teşekkür etmek istiyorum. Fakat geç okumuşum :O) Biraz önce wp siteme Loading Page eklentisi kurdum. Etkinleştirdim. Fakat sayfalar inanılmaz geç açılmaya başladı… Sonra eklentiyi etkisizleştirip silmeme rağmen yavaşlık devam ediyor… Bunun nedeni ne olabilir acaba? https://wordpress.org/plugins/loading-page/ eklenti sayfası bu…

    • Merhaba,

      Sitenizce aktif cache eklentisi varsa temizlemeyi denediniz mi? Onun dışında, eklentiyi kaldırdıktan sonra böyle bir sorun olmaması gerekiyor normalde. Yazılarınızı xml olarak çıkartıp, wp reset ile sıfırlayıp yazıları tekrar eklemeyi deneyebilirsiniz.

      Gelişmeleri yazarsanız tekrar yardımcı olmak isteirm.
      İyi günler :)

      • fabrika sanat

        İlginiz için teşekkür ederim… Total cache kurulu. Onunla temizlik yapmıştım düzelmişti… Kaldırdım tamamen… Onun yerine, daha rahat açılacak başka bir açılış sayfası yaptım… Az da olsa hız kazandı sitem. Bu arada sitemin ismi http://www.fabrikasanat.com

        Çalışmalarınızda başarılar diliyorum.

  • İbrahim

    $(‘#status’).fadeOut(10000); // will first fade out the loading animation
    $(‘#preloader’).delay(10000).fadeOut(‘slow’); // will fade out the white DIV that covers the website.
    $(‘body’).delay(10000).css({‘overflow’:’visible’});

    arkadaşlar şu üç satırda değerler ile oynama yaparsanız yükleniyor resminin. sayfada istediğiniz süre kalmasını sağlayabilirsiniz. Yukarıdaki değerlerle 10 sn sonra kayboluyor. Teşekkürler. Kolay gelsin.

    • Paylaşıma yaptığınız katkı için teşekkür ederim :)

  • Sinan Gençer Taşköprü

    Adamsın Uzun zamandır aradığım bir şeydi ancak bu kadar basit anlatılır, helal….

  • cem

    Bilader bu kod sayfa yüklenirken değil sayfa yüklendikten sonra doğru çalışıyor anlattığınla kodun yaptığı farklı. Sınırsız while döngüsü yazdım java bean e sayfa yüklenirken efekt çıkmıyor.

    • Standart web uygulamalarında test edilmiştir hocam. Bu sitede de gördüğünüz üzere çalışan kod. Ancak extreme durumlarda ne olur bilemiyorum. İleri seviye bir makale bulup yönergeleri izleyebilirsiniz. Teşekkürler yorumunuz için.

  • Kaan

    Ya kardeşim bu süreyi nasıl uzatabiliriz?

    • Hocam sayfanız ne kadar sürede açılırsa o kadar süre bekler.. Farklı bir şey arıyorsunuz siz sanırım.

  • orhan

    calismiyo bilader bu

    • Tüm adımları doğru bir şekilde uyguladığınızdan emin olun. Kodlarda veya anlatımda bir eksik/yanlış yoktur.

  • Ferhat

    Merhaba sayfa hızlı yüklendiği için çok kısa gösteriyor birde orjinal sayfam altta gözüküyor,
    yükleniyor sayfasını 10 sn felan durmasını sağlayabilirmiyim birde orjinal sayfayı gizliyebilirmiyim…

    • Merhabalar, buradaki olay sadece sayfanızın yüklenmesiyle alakalıdır. Sayfa yüklendikten sonra atıyorum 5 saniye daha gösterilmesini istiyorsanız css3 ile el atılması gerekli olaya. CSS3 animation olarak araştırma yapmanızı öneririm.

  • Ömer

    Merhaba, bunu sayfa için değil de belirli bir alanda nasıl yapabiliriz ? Paylaşımınız için teşekkürler.

    • Belirli bir alanda derken hocam? Tam sayfa gözükmesin farklı bir yerde farklı bir şekilde gözüksün istiyorsanız css kodları ile oynayın. Ancak tam sayfa değil de belirli bir yer yüklenirken gözüksün diyorsanız orada olay biraz farklı olacaktır.

  • Rıza

    Saol kardeşim çok işime yaradı

  • Cemal Yıldırım

    progressbar şeklinde yapmayı bilen varsa anlatabilir mi ?

    • Müsait bir zamanda o konuyla alakalı bir yazı yazarım, teşekkürler yorum için :)

  • yilmes

    temiz anlatım

  • Talat

    Aradığım bişeydi eline sağlık

Bunlar da ilgini çekebilir.

Nazım YILMAZ

A webmaster, working with music.

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.

İZLEDİM

Mini Yabancı Diziler : Yüzde 3 Dizisi