Οι οθόνες σκελετού αποτελούν αναπόσπαστο μέρος της διατήρησης των επισκεπτών στις σύγχρονες τάσεις του σχεδιασμού. Δημιουργούν μια ψευδαίσθηση ταχύτητας και διαχειρίζονται τις προσδοκίες των χρηστών κρατώντας τους ενήμερους για την κατάσταση του περιεχομένου μιας σελίδας. Μία από τις πιο ουσιαστικές αλλά υποτιμημένες λύσεις που προσφέρουν οι οθόνες σκελετού είναι η βοήθειά τους στην αποφυγή Αθροιστική μετατόπιση διάταξης (CLS), που επιτρέπει στο περιεχόμενο να εμφανίζεται ταυτόχρονα και όχι διαδοχικά όπως είναι φορτία.

Είστε έτοιμοι να κάνετε τις διεπαφές σας πιο διαισθητικές και εκφραστικές, εφαρμόζοντας οθόνες σκελετού στα δικά σας έργα; Δείτε πώς να ξεκινήσετε.

Σχεδιάστε τη διάταξη της ιστοσελίδας

Ο σχεδιασμός μιας διάταξης ιστοσελίδας σάς βοηθά να αποκρυσταλλώσετε τις προσδοκίες σας. Θα πρέπει να ορίσετε τον στόχο σας, να ορίσετε τη διάταξη, να προσθέσετε τυχόν απαιτούμενες σελίδες και να τον κάνετε προσβάσιμο και να ανταποκρίνεται σε διαφορετικά μεγέθη οθόνης. Προς το παρόν, σκεφτείτε ένα απλό σχέδιο με εικόνα εξωφύλλου, εικόνα προφίλ, λίγο κείμενο και κουμπιά παρότρυνσης για δράση.

Αφού συντάξετε το σχέδιο της διάταξης, είτε χρησιμοποιώντας χαρτί είτε μια εφαρμογή όπως το Figma ή το Adobe XD, ήρθε η ώρα να προετοιμάσετε τη δομή HTML.

Κατασκευάστε τη Βασική Δομή

Δημιουργήστε ένα νέο αρχείο index.html και γράψτε λίγο HTML για τη διάταξη μέσα σε έναν γονέα με class=”profile-container”. Προσθήκη class=”σκελετός” σε κάθε στοιχείο προκειμένου να εφαρμοστεί το εφέ φόρτωσης οθόνης σκελετού. Θα καταργήσετε αυτήν την τάξη όταν το περιεχόμενο φορτωθεί χρησιμοποιώντας JavaScript.

Σημείωση: Μην ξεχάσετε να συνδέσετε τα αρχεία CSS και JavaScript στην κεφαλίδα σας index.html αρχείο.

John Doe

Μηχανικός Λογισμικού @ Google || Προγραμματιστής Full Stack || Αυτοδίδακτος

Bengaluru, Karnataka, Ινδία • Πληροφορίες επαφής


534 συνδέσεις






Μήνυμα
Περισσότερο

Ξεκινήστε να διαμορφώνετε το στυλ της σελίδας σας

Εφαρμόστε τα βασικά χαρακτηριστικά CSS όπως περιθώριο, γραμματοσειρά-οικογένεια, και χρώμα σε όλο το σώμα.

σώμα {
 περιθώριο: 0;
 γραμματοσειρά-οικογένεια: Arial;
 χρώμα: rgba (255, 255, 255, 0,9);
}

Προσθήκη εφέ φόρτωσης

Για να προσθέσετε ένα εφέ φόρτωσης, προσθέστε ένα ::μετάψευδοστοιχείο στην κατηγορία σκελετών που μετακινείται από τα αριστερά (-100%) προς τα δεξιά (100%) για ένα ή δύο δευτερόλεπτα, με αποτέλεσμα ένα λαμπερό animation.

.σκελετος {
 θέση: σχετική;
 πλάτος: μέγιστο περιεχόμενο.
 υπερχείλιση: κρυφό;
 περίγραμμα-ακτίνα: 4px;
 χρώμα φόντου: #1e2226 !important;
 χρώμα: διαφανές !σημαντικό;
 χρώμα περιγράμματος: #1e2226 !important;
 επιλογή χρήστη: κανένας;
 δρομέας: προεπιλογή;
}
.skeleton img {
 αδιαφάνεια: 0;
}
.σκελετος:: μετα {
 θέση: απόλυτη;
 κορυφή: 0;
 δεξιά: 0;
 κάτω: 0;
 αριστερά: 0;
 transform: translateX(-100%);
 background-image: linear-gradient(
 90 μοίρες,
 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)
 );
 animation: shimmer 2s infinite?
 περιεχόμενο: '';
}
@keyframes λαμπύρισμα {
 100% {
 transform: translateX(100%);
 }
}

Δώστε στυλ στις Εικόνες

Τώρα, ας διαμορφώσουμε το στυλ του προφίλ και της εικόνας του εξωφύλλου. Μην ξεχάσετε να ορίσετε υπερχείλιση: κρυφό; για να αποφευχθούν τυχόν ασυνέπειες.

img {
 πλάτος: 100%;
 κατακόρυφη ευθυγράμμιση: μέση;
}
.profile-container {
 πλάτος: 95%;
 μέγιστο πλάτος: 780 px;
 περιθώριο: 0 αυτόματο;
 περίγραμμα-ακτίνα: 8px;
 margin-top: 32px;
 χρώμα φόντου: #1e2226;
 υπερχείλιση: κρυφό;
 θέση: σχετική;
}
.cover-img {
 πλάτος: 100%;
 υπερχείλιση: κρυφό;
 χρώμα φόντου: #1e2226;
 αναλογία διαστάσεων: 4 / 1;
}
.profile-img {
 ακτίνα συνόρων: 50%;
 πλάτος: 160 px;
 ύψος: 160 px;
 περίγραμμα: 4px στερεό #000;
 χρώμα φόντου: #1e2226;
 περιθώριο: 0 αυτόματο;
 θέση: σχετική;
 υπερχείλιση: κρυφό;
 κάτω: 100 px;
}

Κάντε το να ανταποκρίνεται

Για να βεβαιωθείτε ότι το σχέδιό σας αποκρίνεται σε διαφορετικές οθόνες, εφαρμόστε τα ερωτήματα πολυμέσων ανάλογα. Εάν είστε αρχάριοι στην ανάπτυξη ιστού, θα πρέπει να μάθετε πώς να χρησιμοποιήσετε ερωτήματα πολυμέσων σε HTML και CSS επειδή είναι εξαιρετικά σημαντικά κατά τη δημιουργία ιστοσελίδων με απόκριση.

@media (μέγιστο πλάτος: 560 εικονοστοιχεία) {
 .profile-img {
 πλάτος: 100 px;
 ύψος: 100 px;
 κάτω: 60 px;
 }
}

Δώστε στυλ στο κείμενο

Δώστε στυλ στο κείμενο ορίζοντας α περιθώριο, μέγεθος γραμματοσειράς, και βάρος γραμματοσειράς. Μπορείτε επίσης να αλλάξετε το χρώμα του κειμένου, να προσθέσετε μια επικεφαλίδα, μια παράγραφο ή μια άγκυρα προσθέστε ετικέτα σύμφωνα με τις προτιμήσεις σας. Η προσθήκη ενός εφέ αιώρησης στην ετικέτα αγκύρωσης είναι χρήσιμη επειδή ενημερώνει τον χρήστη για έναν σύνδεσμο.

.profile-text {
 margin-top: -80px;
 padding: 0 16px;
}
.profile-text h1 {
 περιθώριο-κάτω: 0;
 μέγεθος γραμματοσειράς: 24 px;
 υπερχείλιση: κρυφό;
}
.profile-text p {
 περιθώριο: 4 px 0;
 υπερχείλιση: κρυφό;
}
.profile-text h5 {
 margin-top: 4px;
 μέγεθος γραμματοσειράς: 14 px;
 margin-bottom: 8px;
 βάρος γραμματοσειράς: 400;
 χρώμα: #ffffff99;
 υπερχείλιση: κρυφό;
}
.profile-text a {
 χρώμα: #70b5f9;
 μέγεθος γραμματοσειράς: 14 px;
 κείμενο-διακόσμηση: κανένα;
 βάρος γραμματοσειράς: 600;
}
.profile-text a: hover {
 χρώμα: #70b5f9;
 κείμενο-διακόσμηση: υπογράμμιση;
}

Δώστε στυλ στο CTA

Μια παρότρυνση για δράση (CTA) είναι σημαντική επειδή γενικά θα θέλετε να μετατρέψετε τις επισκέψεις των χρηστών σας με κάποιο τρόπο. Δίνοντάς του ένα εύκολα ορατό χρώμα θα βοηθήσει το CTA σας να ξεχωρίσει στη σελίδα.

.profile-cta {
 padding: 16px 16px 32px;
 οθόνη: flex;
}
.profile-cta a {
 padding: 6px 16px;
 ακτίνα περιγράμματος: 24 px;
 κείμενο-διακόσμηση: κανένα;
 οθόνη: μπλοκ;
}
.message-btn {
 χρώμα φόντου: #70b5f9;
 χρώμα: #000;
}
.more-btn {
 χρώμα: κληρονομούν;
 περίγραμμα: 1 px στερεό rgba (255, 255, 255, 0,9);
 περιθώριο-αριστερά: 8 εικονοστοιχεία;
}

Παραγωγή:

Απενεργοποιήστε το εφέ φόρτωσης σκελετού χρησιμοποιώντας JavaScript

Τώρα που έχετε προσθέσει το κύριο εφέ χρησιμοποιώντας CSS, ήρθε η ώρα να το απενεργοποιήσετε χρησιμοποιώντας JavaScript. Η κινούμενη εικόνα θα επαναληφθεί άπειρες φορές από προεπιλογή, αλλά θέλετε να εκτελείται μόνο για λίγα δευτερόλεπτα. Μπορείτε να ρυθμίσετε τον χρόνο στα 4000 χιλιοστά του δευτερολέπτου χρησιμοποιώντας setTimeout. Θα αφαιρέσει την κλάση σκελετού από όλα τα στοιχεία μετά από 4 δευτερόλεπτα.

Σημείωση: Φροντίστε να προσθέσετε λίγο πριν το τέλος του Ενότητα.

const skeletons = document.querySelectorAll('.skeleton')
skeletons.forEach((σκελετός) => {
 setTimeout(() => {
σκελετός.classList.remove('σκελετός')
 }, 4000)
})

Παραγωγή:

Τι είναι η JavaScript και πώς λειτουργεί;

Δημιουργήσατε με επιτυχία ένα εφέ φόρτωσης οθόνης σκελετού χρησιμοποιώντας HTML, CSS και JavaScript. Τώρα, κάθε φορά που κάποιος ζητά νέο περιεχόμενο από τον διακομιστή, μπορείτε να εμφανίσετε το εφέ φόρτωσης της οθόνης σκελετού κατά τη φόρτωση των δεδομένων. Γίνεται όλο και πιο δημοφιλής τάση σχεδιασμού, όπως μπορείτε να το δείτε σε ιστότοπους όπως το Google, το Facebook και το Slack.

Εν τω μεταξύ, εάν είστε νέος στη JavaScript, μπορείτε να μάθετε τα βασικά κατανοώντας τη JavaScript και τον τρόπο αλληλεπίδρασης με HTML και CSS.

Τι είναι η JavaScript και πώς λειτουργεί;

Εάν μαθαίνετε την ανάπτυξη ιστού, δείτε τι πρέπει να γνωρίζετε για το JavaScript και πώς λειτουργεί με HTML και CSS.

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα