Sayfa Yükleniyor Kodu ve Efekti

Sayfa Yükleniyor Kodu ve Efekti

07 Haz 2017 /

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ı 1 kez değerlendirilmiş ve ortalama 1 yıldız verilmiş.
Bu yazı daha önce 830 kez okundu.

Facebook Yorumları

Yorumlar

Bu yazıya henuz bir yorum yapılmamış. İlk yorumu yapan siz olun!

Yorum Yaz

guvenlik
Image Analyzer

Image Analyzer

13 Oca 2018 / Multimedya
BitDefender Internet Security

BitDefender Internet Security

13 Oca 2018 / Güvenlik
AIMP

AIMP

13 Oca 2018 / Multimedya
eMule

eMule

13 Oca 2018 / İnternet
Shutter

Shutter

13 Oca 2018 / Araçlar
Shutter

Shutter

13 Oca 2018 / Araçlar
Freez Flv to Mp3 Converter

Freez Flv to Mp3 Converter

13 Oca 2018 / Multimedya
eMule

eMule

13 Oca 2018 / İnternet
Freez 3GP Video Converter

Freez 3GP Video Converter

13 Oca 2018 / Multimedya
EssentialPIM Free Edition

EssentialPIM Free Edition

13 Oca 2018 / Ofis