() translation by (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.
1 |
<div id="preloader_1"> |
2 |
<span></span>
|
3 |
<span></span>
|
4 |
<span></span>
|
5 |
<span></span>
|
6 |
<span></span>
|
7 |
</div>
|
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.
1 |
#preloader_1{ |
2 |
position:relative; |
3 |
}
|
4 |
#preloader_1 span{ |
5 |
display:block; |
6 |
bottom:0px; |
7 |
width: 9px; |
8 |
height: 5px; |
9 |
background:#9b59b6; |
10 |
position:absolute; |
11 |
animation: preloader_1 1.5s infinite ease-in-out; |
12 |
}
|
13 |
|
14 |
#preloader_1 span:nth-child(2){ |
15 |
left:11px; |
16 |
animation-delay: .2s; |
17 |
|
18 |
}
|
19 |
#preloader_1 span:nth-child(3){ |
20 |
left:22px; |
21 |
animation-delay: .4s; |
22 |
}
|
23 |
#preloader_1 span:nth-child(4){ |
24 |
left:33px; |
25 |
animation-delay: .6s; |
26 |
}
|
27 |
#preloader_1 span:nth-child(5){ |
28 |
left:44px; |
29 |
animation-delay: .8s; |
30 |
}
|
31 |
@keyframes preloader_1 { |
32 |
0% {height:5px;transform:translateY(0px);background:#9b59b6;} |
33 |
25% {height:30px;transform:translateY(15px);background:#3498db;} |
34 |
50% {height:5px;transform:translateY(0px);background:#9b59b6;} |
35 |
100% {height:5px;transform:translateY(0px);background:#9b59b6;} |
36 |
}
|
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.
1 |
<div id="preloader_2"> |
2 |
<span></span>
|
3 |
<span></span>
|
4 |
<span></span>
|
5 |
<span></span>
|
6 |
</div>
|
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.
1 |
#preloader_2{ |
2 |
position: relative; |
3 |
left: 50%; |
4 |
width: 40px; |
5 |
height: 40px; |
6 |
}
|
7 |
#preloader_2 span{ |
8 |
display:block; |
9 |
bottom:0px; |
10 |
width: 20px; |
11 |
height: 20px; |
12 |
background:#9b59b6; |
13 |
position:absolute; |
14 |
}
|
15 |
#preloader_2 span:nth-child(1){ |
16 |
animation: preloader_2_1 1.5s infinite ease-in-out; |
17 |
}
|
18 |
#preloader_2 span:nth-child(2){ |
19 |
left:20px; |
20 |
animation: preloader_2_2 1.5s infinite ease-in-out; |
21 |
|
22 |
}
|
23 |
#preloader_2 span:nth-child(3){ |
24 |
top:0px; |
25 |
animation: preloader_2_3 1.5s infinite ease-in-out; |
26 |
}
|
27 |
#preloader_2 span:nth-child(4){ |
28 |
top:0px; |
29 |
left:20px; |
30 |
animation: preloader_2_4 1.5s infinite ease-in-out; |
31 |
}
|
32 |
|
33 |
@-keyframes preloader_2_1 { |
34 |
0% {-transform: translateX(0px) translateY(0px) rotate(0deg); border-radius:0px;} |
35 |
50% {-transform: translateX(-20px) translateY(-10px) rotate(-180deg); border-radius:20px;background:#3498db;} |
36 |
80% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;} |
37 |
100% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;} |
38 |
}
|
39 |
@-keyframes preloader_2_2 { |
40 |
0% {-transform: translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;} |
41 |
50% {-transform: translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#f1c40f;} |
42 |
80% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;} |
43 |
100% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;} |
44 |
}
|
45 |
@-keyframes preloader_2_3 { |
46 |
0% {-transform: translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;} |
47 |
50% {-transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius:20px;background:#2ecc71;} |
48 |
80% {-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;} |
49 |
100% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;} |
50 |
}
|
51 |
|
52 |
|
53 |
@-keyframes preloader_2_4 { |
54 |
0% {-transform: translateX(0px) translateY(0px) rotate(0deg); border-radius:0px;} |
55 |
50% {-transform: translateX(20px) translateY(10px) rotate(180deg); border-radius:20px;background:#e74c3c;} |
56 |
80% {-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;} |
57 |
100% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;} |
58 |
}
|
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
1 |
<div id="preloader_3"></div> |
CSS
1 |
#preloader_3{ |
2 |
position:relative; |
3 |
}
|
4 |
#preloader_3:before{ |
5 |
width:20px; |
6 |
height:20px; |
7 |
border-radius:20px; |
8 |
background:blue; |
9 |
content:''; |
10 |
position:absolute; |
11 |
background:#9b59b6; |
12 |
animation: preloader_3_before 1.5s infinite ease-in-out; |
13 |
}
|
14 |
|
15 |
#preloader_3:after{ |
16 |
width:20px; |
17 |
height:20px; |
18 |
border-radius:20px; |
19 |
background:blue; |
20 |
content:''; |
21 |
position:absolute; |
22 |
background:#2ecc71; |
23 |
left:22px; |
24 |
animation: preloader_3_after 1.5s infinite ease-in-out; |
25 |
}
|
26 |
|
27 |
@keyframes preloader_3_before { |
28 |
0% {transform: translateX(0px) rotate(0deg)} |
29 |
50% {transform: translateX(50px) scale(1.2) rotate(260deg); background:#2ecc71;border-radius:0px;} |
30 |
100% {transform: translateX(0px) rotate(0deg)} |
31 |
}
|
32 |
@keyframes preloader_3_after { |
33 |
0% {transform: translateX(0px)} |
34 |
50% {transform: translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;} |
35 |
100% {transform: translateX(0px)} |
36 |
}
|
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.
1 |
<div id="preloader_4"> |
2 |
<span></span> |
3 |
<span></span> |
4 |
<span></span> |
5 |
<span></span> |
6 |
<span></span> |
7 |
</div> |
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.
1 |
#preloader_4{ |
2 |
position:relative; |
3 |
}
|
4 |
#preloader_4 span{ |
5 |
position:absolute; |
6 |
width:20px; |
7 |
height:20px; |
8 |
background:#3498db; |
9 |
opacity:0.5; |
10 |
border-radius:20px; |
11 |
-animation: preloader_4 1s infinite ease-in-out; |
12 |
|
13 |
}
|
14 |
#preloader_4 span:nth-child(2){ |
15 |
left:20px; |
16 |
animation-delay: .2s; |
17 |
}
|
18 |
#preloader_4 span:nth-child(3){ |
19 |
left:40px; |
20 |
animation-delay: .4s; |
21 |
}
|
22 |
#preloader_4 span:nth-child(4){ |
23 |
left:60px; |
24 |
animation-delay: .6s; |
25 |
}
|
26 |
#preloader_4 span:nth-child(5){ |
27 |
left:80px; |
28 |
animation-delay: .8s; |
29 |
}
|
30 |
@keyframes preloader_4 { |
31 |
0% {opacity: 0.3; transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);} |
32 |
50% {opacity: 1; transform: translateY(-10px); background:#f1c40f; box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);} |
33 |
100% {opacity: 0.3; transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);} |
34 |
}
|
Ö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.
1 |
<div id="preloader5"></div> |
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.
1 |
#preloader5{ |
2 |
position:relative; |
3 |
width:30px; |
4 |
height:30px; |
5 |
background:#3498db; |
6 |
border-radius:50px; |
7 |
animation: preloader_5 1.5s infinite linear; |
8 |
}
|
9 |
#preloader5:after{ |
10 |
position:absolute; |
11 |
width:50px; |
12 |
height:50px; |
13 |
border-top:10px solid #9b59b6; |
14 |
border-bottom:10px solid #9b59b6; |
15 |
border-left:10px solid transparent; |
16 |
border-right:10px solid transparent; |
17 |
border-radius:50px; |
18 |
content:''; |
19 |
top:-20px; |
20 |
left:-20px; |
21 |
animation: preloader_5_after 1.5s infinite linear; |
22 |
}
|
23 |
@keyframes preloader_5 { |
24 |
0% {transform: rotate(0deg);} |
25 |
50% {transform: rotate(180deg);background:#2ecc71;} |
26 |
100% {transform: rotate(360deg);} |
27 |
}
|
28 |
@keyframes preloader_5_after { |
29 |
0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;} |
30 |
50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;} |
31 |
100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;} |
32 |
}
|
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.
1 |
<div id="preloader6"> |
2 |
<span></span>
|
3 |
<span></span>
|
4 |
<span></span>
|
5 |
<span></span>
|
6 |
</div>
|
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.
1 |
#preloader6{ |
2 |
position:relative; |
3 |
width: 42px; |
4 |
height: 42px; |
5 |
animation: preloader_6 5s infinite linear; |
6 |
}
|
7 |
#preloader6 span{ |
8 |
width:20px; |
9 |
height:20px; |
10 |
position:absolute; |
11 |
background:red; |
12 |
display:block; |
13 |
animation: preloader_6_span 1s infinite linear; |
14 |
}
|
15 |
#preloader6 span:nth-child(1){ |
16 |
background:#2ecc71; |
17 |
|
18 |
}
|
19 |
#preloader6 span:nth-child(2){ |
20 |
left:22px; |
21 |
background:#9b59b6; |
22 |
animation-delay: .2s; |
23 |
|
24 |
}
|
25 |
#preloader6 span:nth-child(3){ |
26 |
top:22px; |
27 |
background:#3498db; |
28 |
animation-delay: .4s; |
29 |
}
|
30 |
#preloader6 span:nth-child(4){ |
31 |
top:22px; |
32 |
left:22px; |
33 |
background:#f1c40f; |
34 |
animation-delay: .6s; |
35 |
}
|
36 |
@keyframes preloader_6_span { |
37 |
0% { transform:scale(1); } |
38 |
50% { transform:scale(0.5); } |
39 |
100% { transform:scale(1); } |
40 |
}
|
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.
