Sayfa Yükleniyor Kodu ve Efekti

Sayfa Yükleniyor Kodu ve Efekti

Web sayfanız için sayfa yükleniyor kodu. Web sayfanız arka planda yüklenirken ön planda ziyaretçilerinize güzel bir yükleniyor efekti gösterebilirsiniz.

Sayfa yükleniyor kodları web sayfalarınıza profesyonel bir hava katar. Ayrıca geç yüklenen web sitelerinde ziyaretçilerin hemen çıkmasını engeller. Sayfa yükleniyor görselini istediğiniz şekilde seçebilirsiniz. Böylece ziyaretçileriniz için ilgi çekici bir görsel koyarak sayfayı kapatmalarının önüne geçersiniz.

Bunun için öncelikle sayfanıza aşağıdaki jquery kütüphanesi kodunu ekleyin.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Css kodlarını ister direkt sayfaya ekleyin isterseniz ana css dosyanızın arkasına ekleyin.

.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {	position: fixed;	left: 0px;	top: 0px;	width: 100%;	height: 100%;	z-index: 9999;	background: url(../images/Preloader_3.gif) center no-repeat #fff;
}

Kodu sayfamızda göstermesi için aşağıdaki kodu <body> tagının hemen altına ekleyin.

<div class="se-pre-con"></div>

Aşağıdaki js kodunuda sayfanın alt tarafına </body> tagının üstüne ekleyebilirsiniz. Burada sayfamızdaki diğer jquery uygulamaları ile çakışmaması için değikenimizi değiştirdik. İsterseniz sizin web sitenizde çakışma yoksa değişkeni değiştirmeyebilirsiniz.

 <script type="text/javascript">
// Wait for window load	var $lod = jQuery.noConflict();	$lod(window).load(function() {	// Animate loader off screen	$lod(".se-pre-con").fadeOut("slow");;	});
</script>

Aşağıda kendi sayfamda kullandığım yükleniyor resmi var. Sağ tıklayıp farklı kaydet diyerek alabilirsiniz. Ama istersenizde css kodlarındada gerekli değişikliği yapıp kendi animasyon resminizi de kullanabilirsiniz.

Bu yazıyı 5 yıldız üzerinden kaçla değerlendirirsiniz?
Daha önce bu yazı 2 kez değerlendirilmiş ve ortalama 2 yıldız verilmiş.
Bu yazı daha önce 1629 kez okundu.

Yorum Yaz

    Yorumlar

    Bu yazıya henuz bir yorum yapılmamış. İlk yorumu yapan siz olun!
İstanbul Firma, İlan, Gezi Rehberi ve Haberleri instagram takipçi satın al