Siteye Yükleniyor Efekti Ekleme

Benzer Konular

Blogger Siteye Yükleniyor Efekti Ekleme

Daha önce hiç yükleniyor animasyonu ile karşılaştınız mı? Bu kod sayesinde sitenize yükleniyor efekti verebilirsiniz.

Yükleniyor efekti nedir, ne için kullanılır?


Yükleniyor efekti, ilk resme benzer animasyonları siteniz yükleniyorken ziyaretçilere gösterir. Bu animasyon, web siteleri için oldukça faydalıdır. Eğer web sitenizin yükleme süresi çok uzunsa, ziyaretçiler web sitenizin kapalı olduğunu düşünebilir ve sitenizden ayrılabilir.

Ancak bir yükleme efekti eklemeniz durumunda ziyaretçiler web sitenizin şu anda yüklenmekte olduğunu görecek ve beklemeye devam edecektir. Yükleme efekti eklemenin oldukça fazla yolu olsa dahi, size yazımızda anlatacağımız yöntem ile web sitenizin açılış hızında büyük değişiklikler olmadan bu kodu kullanabileceksiniz.

Ayrıca bu efektlerden tercih alanınızı genişletmek için pek çok versiyonunu ekledik, seçtiğiniz animasyonu yorumlarda paylaşabilirsiniz. Şimdi, bu kodu sitenize nasıl ekleyebilirsiniz bundan bahsedelim.

Kodu paylaşmadan önce, bu kod en iyi şekilde jQuery 1.7.1 sürümü ile çalışır. Lütfen sitenizdeki jQuery kütüphanesi yerine aşağıdaki kütüphaneyi ekleyin.

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

Eğer buraya kadarki işlemlerde sorun yaşamadıysanız, devam edebiliriz. Blogger panelinden Tema ve HTML'yi düzenle tuşuna basarak aşağıdaki kodu </body> kodunun hemen üstüne eklemelisiniz.

<script type='text/javascript'>
//<![CDATA[
// Preloader
$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>

Üstteki kodu ekledikten sonra, aşağıdaki kodu </body> kodunun hemen altına ekleyin.

Örnek bir loading ekranı
Örnek bir loading ekranı
<div id='preloader'>
<svg class='spinner' height='50px' viewBox='0 0 66 66' width='50px' xmlns='http://www.w3.org/2000/svg'>
<circle class='path' cx='33' cy='33' fill='none' r='30' stroke-linecap='round' stroke-width='4'/>
</svg>
</div>

Daha sonra, CTRL+F yolu ile </head> kodunu aratıp hemen üstüne aşağıdaki kodu ekliyoruz.

<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:calc(50% - 20px);left:calc(50% - 20px);animation:rotator 1.4s linear infinite}
@keyframes rotator{0%{transform:rotate(0deg)}100%{transform:rotate(270deg)}}
.path{stroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:dash 1.4s ease-in-out infinite,colors 5.6s ease-in-out infinite}
@keyframes colors{0%{stroke:#4285F4}25%{stroke:#DE3E35}50%{stroke:#F7C223}75%{stroke:#1B9A59}100%{stroke:#4285F4}}
@keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}100%{stroke-dashoffset:187;transform:rotate(450deg)}}
</style>

Bundan sonra Temayı kaydet diyoruz ve temamızı görüntülüyoruz. Ve tüm işlem bu kadardı sevgili dostlar. Web sitenize girdiğinizde kodun başarılı bir şekilde çalıştığını görebilir, sitenizin aynı hız ile açıldığını görebilirsiniz.

Bir hız farkının olmamasını kodların CSS ve SVG şeklinin oldukça saf olmasıdır. Eğer sadece yukarıda bahsettiğimiz yükleniyor kodunu beğenmediyseniz aşağıdaki bağlantıdan geri kalan yükleniyor kodlarını bulabilir ve sitenize ekleyebilirsiniz.
https://www.arlinadzgn.com/2018/08/memasang-efek-preloading-keren-di.html
Siteye yükleniyor efekti ekleme adlı yazımız bu kadardı dostlar. Aklınıza takılan sorular için bir yorum uzağınızdayız! Kendinize iyi bakın, diğer bir yazıda görüşmek üzere, keyifli çalışmalar..

Teknoloji meraklısı ve lise öğrencisi bir gencim.

Yazıyı paylaş

Benzer İçerikler × +