WordPress Web Sitenize Yükleme Animasyonu Ekleyin (10 Farklı Seçenek)

Herkesin her zaman acelesi vardır ve yüklenmesi 2 veya 3 saniyeden uzun süren bir web sitesi "çok yavaş" olarak algılanır. Neyse ki, bu paniği anlık olarak atlamanın ve kullanıcıları bir şeylerin yüklenmesi için yeterince uzun süre sitede tutmanın bir yolu var. Mükemmel hipnotik yükleme animasyonundan bahsediyorum.

Bu yazıda, yükleme animasyonunun tam olarak ne olduğuna, amacının ne olduğuna ve Divi siteleriniz de dahil olmak üzere herhangi bir WordPress sitesine nasıl ekleneceğine bakacağız.

Yükleme Animasyonu Nedir?

Ön yükleyici olarak da adlandırılan yükleme animasyonu, bir web sitesinde tüm öğelerin yüklenmesine yetecek kadar uzun süre görünen göz alıcı bir animasyondur. Bazı yükleme animasyonları kısadır ve kullanıcının dikkatini çok uzun süre tutması gerekmez. Ancak bazı durumlarda, site çok büyükse, yükleme animasyonunun kullanıcının etrafta dolaşması için gerçekten büyüleyici olması gerekir.

Yeterince uzun süredir buralardaysanız, yükleme animasyonlarının 90'lardan beri ortaya çıktığını bilirsiniz. İnternet çağının başlangıcında bile yükleme animasyonlarımız vardı. Tabii o zamanlar, şimdikinden çok daha uzun süre dayanabilirlerdi. Ayrıca, onları sıkmadan ve gezinmeden kullanıcı için çok daha eğlenceli hale getirmeyi öğrendik.

Animasyon Yüklemeyi Tanımak

Animasyon yüklemenin en yaygın tarzı dönen dairedir. Apple bilgisayarlarındaki “gökkuşağı ölüm çemberi” ile karıştırılmamalıdır. Dönen daire yükleme animasyonunun kademeli bir eğim hareketi vardır. İlk dönen ön yükleyicilerin çiçeklerden çemberlere, kar tanelerine ve hatta dönen ying yanglara kadar birçok farklı versiyonu vardı. Günümüzde dönen yükleme animasyonlarına bakmak daha dinamik ve daha güzel.

Dönen yükleme animasyonları yalnızca bekleme süresi kısaysa çalışır. 5 saniyeden fazlası zaten çok fazla. İşte o zaman geliştiricilerin daha yaratıcı ön yükleyiciler kullanması gerekir. Eğlenceli ve eğlenceli bir yükleme animasyonu, ne kadar sürerse sürsün kullanıcıyı sitede tutacaktır.

Animasyonları Daha İyi Yüklemek İçin İpuçları

Yükleme animasyonunuzu hareketli bir görüntüden daha ilginç hale getirmek için ekleyebileceğiniz birkaç şey var. Bunları daha da iyi ve daha etkili hale getirmek için bazı ipuçları.

• Yüzde çubuğu ekle
• Kullanıcının daha ne kadar beklemesi gerektiğini gösterin
• Kaputun altında neler olduğunu açıklayın (mizahı kullanmak için aksesuarlar)
• Aynı eylemi mutlaka tekrarlamayan eğlenceli bir animasyon kullanın

Markalı Yükleme Animasyonunun Yararları

Kendi yükleme animasyonunuzu oluşturma veya özelleştirme seçeneklerine sahip bir eklenti kullanma fırsatınız varsa, ön yükleyicinin markalı olduğundan emin olun. Bu, aslında bir şirket illüstrasyonu kullanmak için markanın web sitesi renklerini kullanmak kadar basit olabilir. Bir yükleme animasyonunu markalamanın ardındaki fikir, o siteye aitmiş gibi görünmesi ve yalnızca bir eklenti olmamasıdır. Awwwards web sitesindeki bu derleme, kendi yaratımlarınıza ilham verebilir.

WordPress Sitenize Yükleme Animasyonu Nasıl Eklenir?

Yükleme animasyonu eklemek düşündüğünüzden daha kolaydır. Bir WordPress sitesine nasıl ekleneceğine dair birkaç seçenek vardır. Kullanımı kolay eklentilerden siteye özel kod eklemeye kadar. Pek çok farklı seçenek olduğundan, etrafa bir göz atıp hangisinin sizin için en uygun olduğunu bulabilmeniz için bunları burada listeleyeceğim.

Yükleme Animasyonu Eklemek için Eklenti Kullanma

Eklenti, yükleme animasyonu eklemenin en kolay ve en basit yoludur. Bunlar, özellikle kodla uğraşma konusunda kendinizi rahat hissetmiyorsanız veya zamanınız yoksa yararlıdır. Animasyonları yüklemek için en çok yönlü eklentilerin bir listesi. Bunlardan bazıları ücretsiz, bazıları ise premiumdur. Bazı durumlarda, aynı eklentinin daha basit bir ücretsiz sürümü ve daha sağlam bir profesyonel sürümü vardır.

Loftloader

Loftloader'ın ücretsiz ve profesyonel bir sürümü vardır. Ücretsiz sürümde, birkaç ön yükleyiciyi deneyebilir ve ardından site ve markaya uyacak şekilde özelleştirebilirsiniz. Profesyonel sürümde daha fazla seçenek ve daha ayrıntılı kontroller bulunur.

Düz Ön Yükleyici

Flat Preloader, sınırlı sayıda renkli yükleme animasyonu içeren basit bir ücretsiz eklentidir. Bir ön yükleyici için hızlı bir düzeltmeye ihtiyacınız varsa ve renkleri veya görüntüyü özelleştirmeniz gerekmiyorsa bu eklenti mükemmeldir.

En İyi Ön Yükleyici

Best Preloader, herhangi bir web sitesi stiline uyan ücretsiz, tek seçenekli bir yükleme animasyonu eklentisidir. Bazı özelleştirme kontrolleri içeren bir animasyonla geliyorum.

Sayfa Yükleyici

Sayfa Yükleyici, birçok özelleştirme ve markalama seçeneği içeren birinci sınıf bir yükleme animasyonu eklentisidir. Piyasadaki favori ön yükleyici eklentilerinden biridir.

WP Akıllı Ön Yükleyici

WP Smart Preloader, tam özelleştirme seçeneklerine sahip ücretsiz ve açık kaynaklı bir eklentidir. Animasyonlar çok ayrıntılı değil, ancak herhangi bir web sitesi stiliyle eşleşecek. Renkleri ve ayarları oldukça kolay bir şekilde özelleştirebilirsiniz.

Eklenti Olmadan Yükleme Animasyonu Ekleme

Bir eklenti kullanmaktan kaçınmak istiyorsanız, birçok ücretsiz ve kullanıma hazır yükleme animasyonu mevcuttur. Eklemeniz gereken kod parçacıklarını sağlayan bazı ileri düzey eğitimlerin yanı sıra.

Multimedya ile PixelBuddha:

Multimedia'daki adamlar, PixelBuddha'dan iki ücretsiz yükleme animasyonu seti ve bunları sitenize kurmak için ihtiyacınız olan kodu içeren basit bir eğitim yayınladı.

Kod Kalemi:

UX Planet'in bu Medium makalesi, yazar, farklı stillerde birçok yükleme animasyonu toplar. Basit olanlar ve daha karmaşık olanlar var. Bunların çoğu CodePen'den gömülüdür ve HTML ve CSS snippet'ini widget'ın kendisinden alabilirsiniz. Yükleme animasyonu kurulumu için bunları eksiksiz bir kod kümesine eklemeniz gerekir.

SpinKit:

Tobias Ashlink, GitHub aracılığıyla sağlanan kodla güzel bir yükleme animasyonu koleksiyonuna sahip bir SpinKit'e sahiptir. Bunların ayrıca bir ön loaer kurulumu için tam kod setine eklenmesi gerekir.

yükleniyor.io:

Loading.io, birçok farklı seçeneğe sahip bir yükleme animasyonları koleksiyonudur. CSS ön yükleyicileri, GIF ön yükleyicileri, düğmeler ve daha fazlası var. Tüm seçenekleri ve bunları sitenize nasıl ekleyeceğinize ilişkin talimatları bulmak için sitelerine bakın.

Pixelvars:

Adamlar Pixelvars, kendi yükleme animasyonunuzu oluşturmak için ihtiyaç duyacağınız tüm kodu içeren kullanışlı bir eğitim yazdı. Kodlarını yukarıdaki CodePen veya GitHub animasyonlarıyla birlikte bile kullanabilirsiniz. Bu seçenek, bazı insanlar için biraz daha gelişmiş görünüyor. İyi kodlama bilgisine sahip bir geliştiriciyseniz, bununla devam edin.

Bu Kadar Çok Seçenek Varken Hangisini Seçeceksiniz?

Bir WordPress web sitesine yükleme animasyonu eklemek kolaydır. Pek çok farklı seçenek mevcut olduğundan, sadece birini seçme meselesi.

Bu gönderide, sitenize yükleme animasyonu eklemenin birçok farklı yolunu gösterdik. Tercih ettiğiniz yöntem hangisi? Bir alt temaya özel olarak tasarlanmış ve kodla mı eklendi? Özelleştirilebilir bir eklenti mi? Basit, gösterişsiz bir seçenek mi? Kendi yükleme animasyonlarınızı kontrol edebilmemiz için yorumlarda bize bildirin.

Muchomoros / Shutterstock.com üzerinden öne çıkan görsel