Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. CSS3
Webdesign

CSS3 ile Hareketlendirilmiş Önyükleyici Koleksiyonu Oluşturmak

by
Difficulty:IntermediateLength:MediumLanguages:

Turkish (Türkçe) translation by Oğuzhan Selçuk Bülbül (you can also view the original English article)

Önyükleyiciler modern web tasarımda genel bir araçtır. Kullanıcılar olarak web'in hızlı ve akıcı olmasını umuyoruz - bir şeyler için beklemeyi sevmiyoruz. Önyükleyiciler içerik yüklenirken bize görsel olarak geribildirim sunuyorlar, böylece beklentileri yönetiyor ve kullanıcının sitenizden vazgeçme şansını azaltıyoruz.

Önyükleyici Oluşturmak için CSS3 Temelleri

CSS3 önyükleyici koleksiyonumuzu inşa etmeye başlamadan önce, ilk olarak bu tür önyükleyiciler oluşturmak için temel olan CSS3'ün bir kaç özelliğinden bahsedeceğim.

Pseudo Elementler :before :after

Pseudo elementler CSS3 önyükleyiciler oluştururken yardım etme de gerçekten kullanışlıdır. Pseudo elementler temel olarak HTML elementinden önce veya sonra sahte elementler oluşturur.

“Pseudo yunanca da sahte anlamına gelen pseudēs kelimesinden türetilmiştir.”

Bu gerçekte var olmayan bir elementi ekstradan oluşturmaya benzer fakat pseudo elementler CSS kullanarak şekillendirilebilir. Bu pseudo elementler CSS3 önyükleyici oluşturmak için bir gereklilik değildir ama onlar kullanışlıdır ve olabildiğince sade bir işaretleme kullanmamızı sağlar.

Pseudo elementler diğer HTML elementleriyle tamamen aynı yollarla şekillendirilebilirler tek fark content özelliğini belirlemiş olmanız gerekir. Bunu belirlemediğiniz zaman pseudo elementi gösterilmez. Content özelliği "Yükleniyor..." gibi önyükleyicinizin ihtiyaç duyacağı herhangi bir yazı içerebilir fakat eğer herhangi bir yazıya ihtiyaç duymuyorsanız o zaman content özelliğini sadece boş bırakabilirsiniz.

CSS3 Animasyon

CSS pseudo elementleri kullanışlıdır ama CSS3 önyükleyici oluşturmak için temel değildir, bunun yanında animation özelliği temeldir. O olmadan önyükleyicinin animasyonu başarısız olur ve sadece hareketsiz bir görünüm olur - içeriğin yüklendiğini göstermek için çok kullanışsızdır.

“CSS animasyonlarının ana bileşeni animasyonun oluşturulduğu css kuralı olan @keyframes'dir. @keyframes'i zaman çizgisi(timeline) üzerindeki sahneler olarak düşünün. @keyframes'in içinde, her biri için farklı stiller belirleyerek,bu sahneleri tanımlayabilirsiniz.” - Acemiler için CSS animasyonlarına giriş

Not: demolara geçmeden önce şunu not etmek iyi bir fikir aşağıdaki kod parçalarında tarayıcı önekleri bulunmamaktadır. Eğer tarayıcı öneklerine ihtiyaç duyarsanız codepen örneklerini inceleyebilirsiniz.

1. Ses Dalgası

Bu önyükleyicinin arkasındaki fikir ses dalgasına benzeyen bir animasyon oluşturmak.

HTML

Her biri ses çubuğunu temsil eden, beş adet span oluşturarak başarabiliriz.

CSS

Efekt her bir span'ın yüksekliği(height) 5px ile 30px arasında hareketlendirilerek başarıldı. Ayrıca span merkezden büyüyormuş efekti vermek için Y kordinatında aşağı doğru 15px hareket ediyor.

Varsayılan olarak her span daki animasyon aynı zamanda gerçekleşir. Meksika dalgası efekti her span için animation-delay özelliğine 2 milisaniye ekleyerek oluşturuluyor. Her span elementi nth-child() seçicisi kullanılarak hedefleniyor.

2. Dairesel Kare

Bu önyükleyici dönerek,değişen,rengi değişen ve daire haline gelen dört kareden oluşur.

HTML

Dört adet span kullanarak oluşturuldu. Her bir daire/kare ve kendilerine adanmış animasyonlara sahipler.

CSS

Dördünün her biri border-radius özelliği 0px'den(kare) 20px'e(daire) ayarlanarak kareden daireye dönüştürülüyor.

Ayrıca her biri dönüyor ve X & Y kordinatlarında bulundukları pozisyonun tersi yönünde hareket ediyorlar. Bunun yanında her span'ın rengi mor renkten kendi bağımsız rengine dönüşüyor. Bu bir kaç dairenin birleşerek bir kare oluşturduğu izlenimini veriyor.

3. Geçişen Şekiller

Geçişen şekiller önyükleyicisi hakkında daha önce konuştuğumuz :before ve :after pseudo elementlerini kullanan tek bir div den oluşuyor.

HTML

CSS

Bir animasyon #preloader_3:before elementine yerleştirildi ve diğeri de #preloader_3:after elementine yerleştirildi. Her animasyonla zıt zamanlarda farklı renklere dönüştürülüyor. Benzer şekilde önceki önyükleyici de her pseudo elementini border-radius özelliğiyle daireden kareye hareketlendiriyordu.

4. Yılan

Yılan her biri daire olarak şekillendirilmiş span koleksiyonundan oluşturuldu.

HTML

İşaretlemeler burada, ama her zaman yılan önyükleyicisini üç adet daire ile oluşturmayı deneyebilirsiniz ve bir çok span kullanmak yerine sadece #preloader_4 div elementini :before ve :after ile kullanarak yapabilirsiniz.

CSS

Animasyon her animasyonda Y pozisyonu -10px değiştirilerek ve renkler maviden sarıya değiştirilerek oluşturuldu. Altında bulunan gölge efektini oluşturmak için her span'a dikey gölge boyutu 0px den 20px e değişen drop shadow eklendi.

Önyükleyici 1 dekine benzer şekilde, her span için animation-delay ekleyerek ve her birinin 2milisaniye gecikme dengesiyle dalga efekti oluşturulabilir.

5. Dönen Diskler

Bu bir.. dönen şey.

HTML

İşte merkezdeki daire için ve :after ile dış çizgiler için basitçe tek bir div kullanıyoruz.

CSS

Üst ve alt kısımlara kenarlık ekliyoruz ve onlara 50px border-radius tanımlıyoruz. Animasyon ana div elementimize eklendi, sadece ana div'in rengini değiştirdik ve transform: rotate() kullanarak döndürme efekti ekledik. Dış kenarlığın rengini değiştirmek için :after elementine animasyon ekledik.

6. Parlak Pencereler

Bu seferkinde biraz Microsoft'a yöneldik...

HTML

Bu önyükleyici için bir div ve her bir kare için bir span yani dört span kullandık.

CSS

Bu kareler ızgara benzeri bir sıra ile dizildi. Animasyon tüm önyükleyiciyi döndürmek için ana div elementine eklendi. Diğer animasyon, ölçeği %100'den %50'ye değiştirmek için her bir span'a eklendi. Daha sonra pulsing efekti için her bir span'a animation-delay ekledik.

Sonuç Olarak

Resim önyükleyiciler yerine CSS3 önyükleyiciler kullanmanın en büyük avantajı ölçeklenebilir ve retina ekranlara hazır olması. Bu demek oluyor ki hangi alette görüntülerseniz görüntüleyin her zaman canlı, temiz ve geleceğe hazır görünecektir (eski tarayıcıların CSS3 animasyonlarını desteklemeyeceğini unutmayın).

Bir kaç önemli CSS3 özelliğini ve tekniğini anladığınıza göre şimdi kendi CSS3 önyükleyicinizi oluşturabilirsiniz. Oluşturulması eğlenceli ve biraz deneme yanılma kullanarak kullanıcıların sitenizden çıkmasını önleyecek gerçekten havalı animasyonlar oluşturabilirsiniz.

Eğer son zamanlarda havalı önyükleyiciler oluşturduysanız onları görmeyi çok isterim! Aşağıda yorumlarınızı bırakmayı unutmayın.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.