İskelet ekranlar, modern tasarım trendlerinde ziyaretçiyi elde tutmanın ayrılmaz bir parçasıdır. Bir hız yanılsaması yaratırlar ve bir sayfanın içeriğinin durumu hakkında onları bilgilendirerek kullanıcıların beklentilerini yönetirler. İskelet ekranların sunduğu en temel ancak yeterince önemsenmeyen çözümlerden biri, Kümülatif Mizanpaj Kayması (CLS), içeriğin sırayla değil, aynı anda görüntülenmesine izin verir yükler.

Kendi projelerinizde iskelet ekranlar uygulayarak arayüzlerinizi daha sezgisel ve etkileyici hale getirmeye hazır mısınız? İşte nasıl başlayacağınız.

Web Sayfası Düzenini Tasarlayın

Bir web sayfası düzeni tasarlamak, beklentilerinizi kristalize etmenize yardımcı olur. Hedefinizi belirlemeli, düzeni tanımlamalı, gerekli sayfaları eklemeli ve farklı ekran boyutları için erişilebilir ve duyarlı hale getirmelisiniz. Şimdilik, kapak resmi, profil resmi, küçük bir metin ve harekete geçirici mesaj düğmeleri içeren basit bir tasarım düşünün.

Kağıt veya Figma ya da Adobe XD gibi bir uygulama kullanarak mizanpajın tasarımını hazırladıktan sonra sıra HTML yapısını hazırlamaya gelir.

Temel Yapıyı Oluşturun

Yeni bir dosya oluştur index.html ve bir ebeveynin içindeki düzen için biraz HTML yazın ile class=”profil-konteyner”. Eklemek sınıf=”iskelet” iskelet ekranı yükleme efektini uygulamak için her öğeye. JavaScript kullanılarak içerik yüklendiğinde bu sınıfı kaldıracaksınız.

Not: Dosyanızın başlığına CSS ve JavaScript dosyalarını bağlamayı unutmayın. index.html dosya.

John Doe

Yazılım Mühendisi @ Google || Tam Yığın Geliştirici || kendi kendine öğretilen

Bengaluru, Karnataka, Hindistan • İletişim bilgileri


534 bağlantı






İleti
Daha

Sayfanızı Şekillendirmeye Başlayın

Gibi temel CSS özelliklerini uygulayın kenar boşluğu, font ailesi, ve renk vücudun her yerinde.

gövde {
 kenar boşluğu: 0;
 yazı tipi ailesi: Arial;
 renk: rgba (255, 255, 255, 0.9);
}

Yükleme efekti ekle

Yükleme efekti eklemek için ::sonrasındasözde eleman bir veya iki saniye içinde soldan (-100%) sağa (%100) hareket eden ve ışıltılı bir animasyonla sonuçlanan iskelet sınıfına.

.iskelet {
 pozisyon: göreceli;
 genişlik: maksimum içerik;
 taşma: gizli;
 sınır yarıçapı: 4 piksel;
 arka plan rengi: #1e2226 !önemli;
 renk: şeffaf !önemli;
 kenarlık rengi: #1e2226 !important;
 kullanıcı seçimi: yok;
 imleç: varsayılan;
}
.skeleton resmi {
 opaklık: 0;
}
.skeleton:: sonra {
 konum: mutlak;
 üst: 0;
 sağ: 0;
 alt: 0;
 sol: 0;
 transform: translateX(-100%);
 arka plan görüntüsü: doğrusal gradyan(
 90 derece,
 rgba (255, 255, 255, 0) 0,
 rgba (255, 255, 255, 0.2) %20,
 rgba (255, 255, 255, 0,5) %60,
 rgba (255, 255, 255, 0)
 );
 animasyon: ışıltı 2s sonsuz;
 içerik: '';
}
@ana kareler ışıltı {
 100% {
 dönüştürmek: translateX(100%);
 }
}

Görüntüleri Stillendirin

Şimdi profili ve kapak resmini şekillendirelim. ayarlamayı unutma taşma: gizli; herhangi bir tutarsızlıktan kaçınmak için.

resim {
 genişlik: %100;
 dikey hizalama: orta;
}
.profile-container {
 genişlik: %95;
 maksimum genişlik: 780 piksel;
 kenar boşluğu: 0 otomatik;
 sınır yarıçapı: 8 piksel;
 üst kenar boşluğu: 32 piksel;
 arka plan rengi: #1e2226;
 taşma: gizli;
 pozisyon: göreceli;
}
.cover-img {
 genişlik: %100;
 taşma: gizli;
 arka plan rengi: #1e2226;
 en-boy oranı: 4 / 1;
}
.profile-img {
 sınır yarıçapı: %50;
 genişlik: 160 piksel;
 yükseklik: 160 piksel;
 kenarlık: 4 piksel katı #000;
 arka plan rengi: #1e2226;
 kenar boşluğu: 0 otomatik;
 pozisyon: göreceli;
 taşma: gizli;
 alt: 100 piksel;
}

Duyarlı Yap

Tasarımınızın farklı ekranlarda yanıt verdiğinden emin olmak için buna göre medya sorguları uygulayın. Web geliştirmeye yeni başlıyorsanız, öğrenmelisiniz HTML ve CSS'de medya sorguları nasıl kullanılır çünkü duyarlı web siteleri oluştururken çok önemlidirler.

@media (maksimum genişlik: 560 piksel) {
 .profile-img {
 genişlik: 100 piksel;
 yükseklik: 100 piksel;
 alt: 60 piksel;
 }
}

Metne Stil Ver

a ayarlayarak metne stil verin. kenar boşluğu, yazı Boyutu, ve yazı tipi ağırlığı. Ayrıca metin rengini değiştirebilir, başlık, paragraf veya bağlantı ekleyebilirsiniz. tercihlerinize göre etiketleyin. Bağlantı etiketine fareyle üzerine gelme efekti eklemek, kullanıcının bir bağlantı hakkında bilgi sahibi olmasını sağladığı için yararlıdır.

.profile-metin {
 üst kenar boşluğu: -80 piksel;
 dolgu: 0 16 piksel;
}
.profile-text h1 {
 kenar boşluğu-alt: 0;
 yazı tipi boyutu: 24 piksel;
 taşma: gizli;
}
.profile-metin p {
 kenar boşluğu: 4 piksel 0;
 taşma: gizli;
}
.profile-text h5 {
 üst kenar boşluğu: 4 piksel;
 yazı tipi boyutu: 14 piksel;
 kenar boşluğu-alt: 8 piksel;
 yazı tipi ağırlığı: 400;
 renk: #ffffff99;
 taşma: gizli;
}
.profile-text a {
 renk: #70b5f9;
 yazı tipi boyutu: 14 piksel;
 metin-dekorasyon: yok;
 yazı tipi ağırlığı: 600;
}
.profile-text a: üzerine gelin {
 renk: #70b5f9;
 metin-dekorasyon: altı çizili;
}

CTA'ya stil verin

Bir Harekete Geçirici Mesaj (CTA) önemlidir çünkü genellikle kullanıcılarınızın ziyaretlerini bir şekilde dönüştürmek isteyeceksiniz. Kolayca fark edilebilir bir renk vermek, CTA'nızın sayfada öne çıkmasına yardımcı olacaktır.

.profile-cta {
 dolgu: 16px 16px 32px;
 ekran: esnek;
}
.profile-cta a {
 dolgu: 6px 16px;
 sınır yarıçapı: 24 piksel;
 metin-dekorasyon: yok;
 Ekran bloğu;
}
.message-btn {
 arka plan rengi: #70b5f9;
 renk: #000;
}
.more-btn {
 renk: miras;
 kenarlık: 1 piksel katı rgba (255, 255, 255, 0.9);
 sol kenar boşluğu: 8 piksel;
}

Çıktı:

JavaScript Kullanarak İskelet Yükleme Etkisini Kapatın

Artık öncü efekti CSS kullanarak eklediğinize göre, JavaScript kullanarak kapatmanın zamanı geldi. Animasyon varsayılan olarak sonsuz sayıda tekrar edecektir, ancak siz onun yalnızca birkaç saniye çalışmasını istiyorsunuz. kullanarak süreyi 4000 milisaniyeye ayarlayabilirsiniz. setZaman aşımı. 4 saniye sonra iskelet sınıfını tüm öğelerden kaldıracaktır.

Not: Eklediğinizden emin olun bitmeden hemen önce Bölüm.

const iskeletler = document.querySelectorAll('.skeleton')
iskeletler.forEach((iskelet) => {
 setTimeout(() => {
iskelet.classList.remove('iskelet')
 }, 4000)
})

Çıktı:

JavaScript Nedir ve Nasıl Çalışır?

HTML, CSS ve JavaScript kullanarak bir iskelet ekran yükleme efektini başarıyla oluşturdunuz. Artık, herhangi biri sunucudan yeni içerik istediğinde, veriler yüklenirken iskelet ekran yükleme efektini görüntüleyebilirsiniz. Google, Facebook ve Slack gibi sitelerde görebileceğiniz gibi, giderek daha popüler bir tasarım trendi haline geliyor.

Bu arada, JavaScript'te yeniyseniz, JavaScript'i anlayarak ve HTML ve CSS ile nasıl etkileşime girdiğini anlayarak temel bilgileri öğrenebilirsiniz.

JavaScript Nedir ve Nasıl Çalışır?

Web geliştirmeyi öğreniyorsanız, JavaScript ve HTML ve CSS ile nasıl çalıştığı hakkında bilmeniz gerekenler burada.

Sonrakini Oku

Yazar hakkında