Skeleton screen merupakan bagian integral dari retensi pengunjung dalam tren desain modern. Mereka menciptakan ilusi kecepatan dan mengelola harapan pengguna dengan memberi mereka informasi tentang status konten halaman. Salah satu solusi paling penting namun diremehkan yang ditawarkan layar kerangka adalah bantuan mereka dalam menghindari Pergeseran Tata Letak Kumulatif (CLS), memungkinkan konten ditampilkan sekaligus, bukan secara berurutan beban.

Siap membuat antarmuka Anda lebih intuitif dan ekspresif dengan menerapkan layar kerangka dalam proyek Anda sendiri? Berikut adalah cara untuk memulai.

Desain Tata Letak Halaman Web

Merancang tata letak halaman web membantu Anda mewujudkan harapan Anda. Anda harus menetapkan tujuan, menentukan tata letak, menambahkan halaman yang diperlukan, dan membuatnya dapat diakses dan responsif untuk berbagai ukuran layar. Untuk saat ini, pertimbangkan desain sederhana dengan gambar sampul, gambar profil, sedikit teks, dan tombol ajakan bertindak.

Setelah Anda merancang desain tata letak, baik menggunakan kertas atau aplikasi seperti Figma atau Adobe XD, saatnya menyiapkan struktur HTML.

Bangun Struktur Dasar

Buat file baru index.html dan tulis beberapa HTML untuk tata letak di dalam induk dengan class="profile-container". Menambahkan kelas="kerangka" ke setiap elemen untuk menerapkan efek pemuatan layar kerangka. Anda akan menghapus kelas ini saat konten dimuat menggunakan JavaScript.

Catatan: Jangan lupa untuk menautkan file CSS dan JavaScript di header Anda index.html mengajukan.

John Doe

Insinyur Perangkat Lunak @ Google || Pengembang Tumpukan Penuh || otodidak

Bengaluru, Karnataka, India • Info kontak


534 koneksi






Pesan
Lagi

Mulai Menata Halaman Anda

Terapkan atribut CSS dasar seperti batas, font-family, dan warna seluruh tubuh.

tubuh {
 margin: 0;
 font-family: Arial;
 warna: rgba (255, 255, 255, 0.9);
}

Tambahkan efek pemuatan

Untuk menambahkan efek pemuatan, tambahkan ::setelahelemen semu ke kelas kerangka yang bergerak dari kiri (-100%) ke kanan (100%) selama satu atau dua detik, menghasilkan animasi yang berkilauan.

.kerangka {
 posisi: relatif;
 lebar: max-konten;
 melimpah: tersembunyi;
 batas-radius: 4px;
 warna latar: #1e2226 !penting;
 warna: transparan !penting;
 warna batas: #1e2226 !penting;
 pilihan pengguna: tidak ada;
 kursor: default;
}
.gambar kerangka {
 opasitas: 0;
}
.skeleton:: setelah {
 posisi: mutlak;
 atas: 0;
 kanan: 0;
 bawah: 0;
 kiri: 0;
 mengubah: translateX(-100%);
 background-image: linear-gradient(
 90 derajat,
 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)
 );
 animasi: shimmer 2s tak terbatas;
 isi: '';
}
@keyframes berkilau {
 100% {
 mengubah: translateX(100%);
 }
}

Gaya Gambar

Sekarang, mari kita menata profil dan gambar sampul. Jangan lupa atur melimpah: tersembunyi; untuk menghindari inkonsistensi.

gambar {
 lebar: 100%;
 vertikal-align: tengah;
}
.profil-wadah {
 lebar: 95%;
 lebar maks: 780 piksel;
 margin: 0 otomatis;
 batas-radius: 8px;
 margin-atas: 32px;
 warna latar: #1e2226;
 melimpah: tersembunyi;
 posisi: relatif;
}
.cover-img {
 lebar: 100%;
 melimpah: tersembunyi;
 warna latar: #1e2226;
 rasio aspek: 4 / 1;
}
.profil-img {
 batas-radius: 50%;
 lebar: 160 piksel;
 tinggi: 160 piksel;
 batas: 4px solid #000;
 warna latar: #1e2226;
 margin: 0 otomatis;
 posisi: relatif;
 melimpah: tersembunyi;
 bawah: 100 piksel;
}

Jadikan Responsif

Untuk memastikan bahwa desain Anda responsif pada layar yang berbeda, terapkan kueri media yang sesuai. Jika Anda seorang pemula dalam pengembangan web, Anda harus belajar cara menggunakan kueri media dalam HTML dan CSS karena mereka sangat penting saat membuat situs web responsif.

@media (lebar maks: 560 piksel) {
 .profil-img {
 lebar: 100 piksel;
 tinggi: 100 piksel;
 bawah: 60px;
 }
}

Gaya Teks

Gaya teks dengan menyetel a batas, ukuran huruf, dan font-berat. Anda juga dapat mengubah warna teks, menambahkan judul, paragraf, atau jangkar tandai sesuai dengan preferensi Anda. Menambahkan efek hover ke tag jangkar berguna karena memberi tahu pengguna tentang tautan.

.profil-teks {
 margin-atas: -80px;
 bantalan: 0 16px;
}
.profil-teks h1 {
 margin-bawah: 0;
 ukuran font: 24px;
 melimpah: tersembunyi;
}
.profil-teks p {
 margin: 4 piksel 0;
 melimpah: tersembunyi;
}
.profil-teks h5 {
 margin-atas: 4px;
 ukuran font: 14px;
 margin-bawah: 8px;
 font-berat: 400;
 warna: #ffffff99;
 melimpah: tersembunyi;
}
.profile-teks a {
 warna: #70b5f9;
 ukuran font: 14px;
 dekorasi teks: tidak ada;
 font-berat: 600;
}
.profile-teks a: arahkan {
 warna: #70b5f9;
 dekorasi teks: garis bawah;
}

Gaya CTA

Ajakan Bertindak (CTA) penting karena biasanya Anda ingin mengonversi kunjungan pengguna dengan cara tertentu. Memberinya warna yang mudah terlihat akan membantu CTA Anda menonjol di halaman.

.profile-cta {
 bantalan: 16px 16px 32px;
 tampilan: fleksibel;
}
.profile-cta a {
 bantalan: 6px 16px;
 batas-radius: 24px;
 dekorasi teks: tidak ada;
 tampilan: blok;
}
.pesan-btn {
 warna latar: #70b5f9;
 warna: #000;
}
.more-btn {
 warna: mewarisi;
 perbatasan: 1px solid rgba (255, 255, 255, 0.9);
 margin-kiri: 8px;
}

Keluaran:

Matikan Efek Pemuatan Kerangka Menggunakan JavaScript

Sekarang Anda telah menambahkan efek utama menggunakan CSS, saatnya untuk mematikannya menggunakan JavaScript. Animasi akan berulang berkali-kali secara default, tetapi Anda ingin itu berjalan hanya selama beberapa detik. Anda dapat mengatur waktu ke 4000 milidetik menggunakan atur waktu habis. Ini akan menghapus kelas kerangka dari semua elemen setelah 4 detik.

Catatan: Pastikan untuk menambahkan sebelum akhir bagian.

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

Keluaran:

Apa itu JavaScript dan Bagaimana Cara Kerjanya?

Anda telah berhasil membuat efek pemuatan layar kerangka menggunakan HTML, CSS, dan JavaScript. Sekarang, setiap kali ada yang meminta konten baru dari server, Anda dapat menampilkan efek pemuatan layar kerangka saat data sedang dimuat. Ini menjadi tren desain yang lebih populer, seperti yang Anda lihat di situs-situs seperti Google, Facebook, dan Slack.

Sementara itu, jika Anda baru mengenal JavaScript, Anda dapat mempelajari dasar-dasarnya dengan memahami JavaScript dan bagaimana ia berinteraksi dengan HTML dan CSS.

Apa Itu JavaScript dan Bagaimana Cara Kerjanya?

Jika Anda mempelajari pengembangan web, inilah yang perlu Anda ketahui tentang JavaScript dan cara kerjanya dengan HTML dan CSS.

Baca Selanjutnya

Tentang Penulis