[Paylaşım] Yükleme Ekranı

[Selo333]

Kendim hazırladığım sade tasarımlı yüklenme ekranını sizlerle paylaşıyorum.
Video :

Umarım beğenirsiniz. Hata bulursanız söyleyin düzeltmeye çalışırım.

Kendi sunucu adınızı koymak istiyorsanız birkaç düzenleme yapmanız gerekmekte çünkü animasyonları var.

İlk olarak sunucu adı için bu şekilde <span> ekleyerek harf harf yazıyoruz.

index.html 23-29 satıları arası:

<h1>
    <span>F</span>
    <span>i</span>
    <span>v</span>
    <span>e</span>
    <span>M</span>
</h1>

Örnek:

<h1>
    <span>L</span>
    <span>U</span>
    <span>L</span>
</h1>

Ardından animasyon için style.css giriyoruz 47-65 satıları arası:

h1 span:nth-child(1){
    animation-delay: 0s;
}

h1 span:nth-child(2){
    animation-delay: 0.2s;
}

h1 span:nth-child(3){
    animation-delay: 0.4s;
}

h1 span:nth-child(4){
    animation-delay: 0.6s;
}

h1 span:nth-child(5){
    animation-delay: 0.8s;
}

Burada h1 spanları girdiğimiz harf sayısı kadar yapıyoruz mesela ben LUL yazdım:

h1 span:nth-child(1){
    animation-delay: 0s;
}

h1 span:nth-child(2){
    animation-delay: 0.2s;
}

h1 span:nth-child(3){
    animation-delay: 0.4s;
}

3 tane h1 span var ve sondaki değeri artan şekilde yapmayı unutmayın.

Sıra discord kısmına geldi index.html'de 38-50 satıları arasında:

<h1>
                <span1>d</span1>
                <span1>i</span1>
                <span1>s</span1>
                <span1>c</span1>
                <span1>o</span1>
                <span1>r</span1>
                <span1>d</span1>
                <span1>.</span1>
                <span1>g</span1>
                <span1>g</span1>
                <span1>/</span1>
</h1>

Sonunda <span1> ekleyerek devamını getiriyoruz. Örnek:

<h1>
                <span1>d</span1>
                <span1>i</span1>
                <span1>s</span1>
                <span1>c</span1>
                <span1>o</span1>
                <span1>r</span1>
                <span1>d</span1>
                <span1>.</span1>
                <span1>g</span1>
                <span1>g</span1>
                <span1>/</span1>
                <span1>l</span1>
                <span1>u</span1>
                <span1>l</span1>
</h1>

Ardından discord kısmına animasyon eklemek için style.css 189-231 satıları arası:

h1 span1:nth-child(1){
    animation-delay: 0s;
}

h1 span1:nth-child(2){
    animation-delay: 0.2s;
}

h1 span1:nth-child(3){
    animation-delay: 0.4s;
}

h1 span1:nth-child(4){
    animation-delay: 0.6s;
}

h1 span1:nth-child(5){
    animation-delay: 0.8s;
}

h1 span1:nth-child(6){
    animation-delay: 1.0s;
}

h1 span1:nth-child(7){
    animation-delay: 1.2s;
}

h1 span1:nth-child(8){
    animation-delay: 1.4s;
}

h1 span1:nth-child(9){
    animation-delay: 1.6s;
}

h1 span1:nth-child(10){
    animation-delay: 1.8s;
}

h1 span1:nth-child(11){
    animation-delay: 2.0s;
}

11 tane var eklediğimiz karakter kadar aynısından kopyala yapıştır yapıyoruz ve sondaki değeride arttırıyoruz. Unutmamız gereken bir detay var
yeni h1 span1 koydukça animation-delay değerini 0.2s kadar arttırıyoruz
Ben 3 tane değer ekleyip sonunda lul ekledim

h1 span1:nth-child(1){
    animation-delay: 0s;
}

h1 span1:nth-child(2){
    animation-delay: 0.2s;
}

h1 span1:nth-child(3){
    animation-delay: 0.4s;
}

h1 span1:nth-child(4){
    animation-delay: 0.6s;
}

h1 span1:nth-child(5){
    animation-delay: 0.8s;
}

h1 span1:nth-child(6){
    animation-delay: 1.0s;
}

h1 span1:nth-child(7){
    animation-delay: 1.2s;
}

h1 span1:nth-child(8){
    animation-delay: 1.4s;
}

h1 span1:nth-child(9){
    animation-delay: 1.6s;
}

h1 span1:nth-child(10){
    animation-delay: 1.8s;
}

h1 span1:nth-child(11){
    animation-delay: 2.0s;
}

h1 span1:nth-child(12){
    animation-delay: 2.2s;
}

h1 span1:nth-child(13){
    animation-delay: 2.4s;
}

h1 span1:nth-child(14){
    animation-delay: 2.6s;
}

Not: Bu şekilde sunucu adını uzun yapacaksanız aynı şekilde eklemeniz gerekiyor.

Fark ediceksiniz şimdi bir hata oldu animasyon hatalı bunu çözmek için style.css giriyoruz 185-187 satıları arasında:

h1 span1{
    animation: animate1 2.6s linear infinite;
}

Buraya en son değerdeki animation-delay aynı olması lazım bende 2.6s o yüzden 2.6s yapıyorum.

Not: Sunucu adını uzatacaksanız aynı şekilde 43-45 satıları arası süreyi aynı şekilde animation-delay ile aynı olmalı.

Yeterince açık olmadıysa soru sorabilirsiniz.
İndirme Linki:

Linkleri,görmek için Giriş yap veya üye ol.

fivemturk.net dışında başka bir yerde paylaşılmasını istemiyorum.
Fikir ve önerilerinizi paylaşabilirsiniz.
​

 

[Ruqen]

Eline sağlık da biraz uğraştırıcı geldi bana

 

[Selo333]

Eline sağlık da biraz uğraştırıcı geldi bana

Evet biraz öyle

 

[cryder]

Linkleri,görmek için Giriş yap veya üye ol.

bu şekilde hata alıyorum.

 

[UFO]

Eline sağlık yararlı paylaşım

 

[kaanaltunsac]

Eline sağlık yararlı paylaşım