Preloader.js ile Sayfalarınıza ‘Yükleniyor’ Barı

Vatanay Özbeyli 1 Yorum jQuery, Öne Çıkanlar

Adobewordpress gururla sunar : Preloader.js

Birçok takipçimizin YouTube’da kullanılan yükleniyor barının nasıl yapıldığını sorması üzerine sizlere özel bir plugin geliştirme gereği duyduk. Preloader ismini verdiğimiz bu jQuery eklentisi sayfanızın yüklenmesini hesaplayıp bu süre dahilinde dolan bir bar ve dönen bir spinner oluşturuyor.

Ayrıca isteğe bağlı olarak kırmızı, mavi, yeşil ve sarı gibi ana renklere bürünmekle kalmıyor, tercih edilirse yüklenme sırasında sitenizin üstünü siyah ve beyaz renkteki perdesiyle de örtüyor.

Adobewordpress ailesi olarak Cumhuriyet Bayramı‘nızı kutlarız. Ne mutlu Türküm diyene!

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

Yıldızlarla Yükleniyor Animasyonu (Spinner)

Vatanay Özbeyli Yorum yazın Diğer Konular & İpuçları, jQuery

Web sayfanızdaki yüklenme işlemlerinizin uçuşan yıldızlardan oluşan bir animasyonla süslenmesini ister misiniz? Georgi tarafından hazırlanan bu şık tasarım sayesinde bir canvas öğesini JavaScript ile süsleyebilir, bu yapıyı oluşturabilirsiniz.

Hazırsanız yıldızlardan oluşan yükleniyor animasyonunu birlikte oluşturalım.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

CSS ile Facebook Loading (Spinner)

Vatanay Özbeyli Yorum yazın CSS3

Facebook‘un kendine has tasarımının en dikkat çekici öğelerinden biri de ‘yükleniyor’ animasyonları. Spinner ve loader diye de tanımlanan bu öğeler CSS ile kolaylıkla hazırlanabilir.

Bu makalemizde klasik bir listeleme (ul) yapısını Facebook’un spinner öğesine çevireceğiz ve bütün bu işlemi sadece birkaç satır CSS kodu ile yapacağız.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

CSS ile Loading Animasyonu (Spinner)

Vatanay Özbeyli 1 Yorum CSS3

Dijital olan ve elektronik bir cihaz üzerinden çalışan her türden proje kısa da olsa “Yükleniyor…” animasyonuna ihtiyaç duyar. İşin web tarafında da CSS3‘ün gelişiyle GIF ve SWF animasyonlar rafa kaldırılarak yerlerini sadece CSS ile işleyen tasarımlar aldı. Ancak bu CSS kodları da bazen o kadar detaylı ve uzun oluyor ki sıradan bir GIF’den daha ağır çalışıyor.

Bu dersimizde sadece bir div ve birkaç satır CSS kodu ile dönen bir topaç (loading animasyonu) oluşturacağız.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku