Gli schermi scheletrici sono parte integrante della fidelizzazione dei visitatori nelle tendenze del design moderno. Creano un'illusione di velocità e gestiscono le aspettative degli utenti tenendoli informati sullo stato del contenuto di una pagina. Una delle soluzioni più essenziali ma sottovalutate offerte dagli schermi scheletrati è il loro aiuto nell'evitare Cumulative Layout Shift (CLS), che consente di visualizzare il contenuto tutto in una volta anziché in sequenza come è carichi.

Pronto a rendere le tue interfacce più intuitive ed espressive implementando schermate scheletro nei tuoi progetti? Ecco come iniziare.

Progetta il layout della pagina Web

Progettare un layout di pagina Web ti aiuta a cristallizzare le tue aspettative. Dovresti impostare il tuo obiettivo, definire il layout, aggiungere le pagine richieste e renderlo accessibile e reattivo per le diverse dimensioni dello schermo. Per ora, considera un design semplice con un'immagine di copertina, un'immagine del profilo, un piccolo testo e pulsanti di invito all'azione.

Dopo aver abbozzato il design del layout, utilizzando carta o un'app come Figma o Adobe XD, è il momento di preparare la struttura HTML.

Costruisci la struttura di base

Crea un nuovo file index.html e scrivi del codice HTML per il layout all'interno di un genitore con class=”profilo-contenitore”. Aggiungere class=”scheletro” ad ogni elemento per applicare l'effetto di caricamento dello schermo scheletro. Rimuoverai questa classe quando il contenuto verrà caricato utilizzando JavaScript.

Nota: non dimenticare di collegare i file CSS e JavaScript nell'intestazione del tuo index.html file.

John Doe

Ingegnere software @ Google || Sviluppatore stack completo || autodidatta

Bengaluru, Karnataka, India • Informazioni di contatto


534 connessioni






Messaggio
Di più

Inizia a modellare la tua pagina

Applica gli attributi CSS di base come margine, famiglia di font, e colore tutto il corpo.

corpo {
 margine: 0;
 famiglia di caratteri: Arial;
 colore: rgba (255, 255, 255, 0.9);
}

Aggiungi effetto di caricamento

Per aggiungere un effetto di caricamento, aggiungi un ::dopopseudo-elemento alla classe scheletro che si sposta da sinistra (-100%) a destra (100%) in un secondo o due, risultando in un'animazione luccicante.

.scheletro {
 posizione: relativa;
 larghezza: contenuto massimo;
 trabocco: nascosto;
 raggio di confine: 4px;
 colore di sfondo: #1e2226 !importante;
 colore: trasparente !importante;
 colore del bordo: #1e2226 !importante;
 selezione utente: nessuno;
 cursore: predefinito;
}
.scheletro img {
 opacità: 0;
}
.scheletro:: dopo {
 posizione: assoluta;
 in alto: 0;
 destra: 0;
 in basso: 0;
 sinistra: 0;
 trasforma: translateX(-100%);
 immagine-sfondo: gradiente-lineare(
 90 gradi,
 rgba (255, 255, 255, 0) 0,
 rgb (255, 255, 255, 0.2) 20%,
 rgb (255, 255, 255, 0,5) 60%,
 rgb (255, 255, 255, 0)
 );
 animazione: shimmer 2s infinito;
 contenuto: '';
}
@fotogrammi chiave luccicare {
 100% {
 trasforma: translateX(100%);
 }
}

Dai uno stile alle immagini

Ora, stiliamo il profilo e l'immagine di copertina. Non dimenticare di impostare trabocco: nascosto; per evitare incongruenze.

img {
 larghezza: 100%;
 allineamento verticale: medio;
}
.profile-contenitore {
 larghezza: 95%;
 larghezza massima: 780 px;
 margine: 0 automatico;
 bordo-raggio: 8px;
 margine superiore: 32px;
 colore di sfondo: #1e2226;
 trabocco: nascosto;
 posizione: relativa;
}
.cover-img {
 larghezza: 100%;
 trabocco: nascosto;
 colore di sfondo: #1e2226;
 proporzioni: 4 / 1;
}
.profile-img {
 raggio di confine: 50%;
 larghezza: 160px;
 altezza: 160px;
 bordo: 4px solido #000;
 colore di sfondo: #1e2226;
 margine: 0 automatico;
 posizione: relativa;
 trabocco: nascosto;
 in basso: 100 pixel;
}

Rendilo reattivo

Per assicurarti che il tuo design sia reattivo su schermi diversi, applica le query multimediali di conseguenza. Se sei un principiante nello sviluppo web, dovresti imparare come utilizzare le query multimediali in HTML e CSS perché sono molto importanti quando si creano siti Web reattivi.

@media (larghezza massima: 560 px) {
 .profile-img {
 larghezza: 100px;
 altezza: 100px;
 in basso: 60 pixel;
 }
}

Stile il testo

Stile il testo impostando a margine, dimensione del font, e carattere-peso. Puoi anche cambiare il colore del testo, aggiungere un'intestazione, un paragrafo o un'ancora taggare secondo le vostre preferenze. L'aggiunta di un effetto al passaggio del mouse al tag di ancoraggio è utile perché consente all'utente di conoscere un collegamento.

.profilo-testo {
 margine superiore: -80px;
 imbottitura: 0 16px;
}
.profilo-testo h1 {
 margine inferiore: 0;
 dimensione del carattere: 24px;
 trabocco: nascosto;
}
.profile-testo p {
 margine: 4px 0;
 trabocco: nascosto;
}
.profilo-testo h5 {
 margine superiore: 4px;
 dimensione del carattere: 14px;
 margine inferiore: 8px;
 peso del carattere: 400;
 colore: #ffffff99;
 trabocco: nascosto;
}
.profile-text a {
 colore: #70b5f9;
 dimensione del carattere: 14px;
 decorazione del testo: nessuna;
 peso del carattere: 600;
}
.profile-text a: hover {
 colore: #70b5f9;
 decorazione del testo: sottolineatura;
}

Stile il CTA

Una Call to Action (CTA) è importante perché generalmente vorrai convertire in qualche modo le visite dei tuoi utenti. Dargli un colore facilmente riconoscibile aiuterà il tuo CTA a risaltare sulla pagina.

.profile-cta {
 imbottitura: 16px 16px 32px;
 display: flessibile;
}
.profile-cta a {
 imbottitura: 6px 16px;
 bordo-raggio: 24px;
 decorazione del testo: nessuna;
 blocco di visualizzazione;
}
.message-btn {
 colore di sfondo: #70b5f9;
 colore: #000;
}
.more-btn {
 colore: ereditare;
 bordo: 1px rgba solido (255, 255, 255, 0.9);
 margine sinistro: 8px;
}

Produzione:

Disattiva l'effetto di caricamento scheletro utilizzando JavaScript

Ora che hai aggiunto l'effetto principale utilizzando CSS, è il momento di disattivarlo utilizzando JavaScript. L'animazione si ripeterà un numero infinito di volte per impostazione predefinita, ma desideri che venga eseguita solo per pochi secondi. È possibile impostare il tempo su 4000 millisecondi utilizzando setTimeout. Rimuoverà la classe scheletro da tutti gli elementi dopo 4 secondi.

Nota: Assicurati di aggiungere poco prima della fine del sezione.

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

Produzione:

Che cos'è JavaScript e come funziona?

Hai creato con successo un effetto di caricamento dello schermo scheletro utilizzando HTML, CSS e JavaScript. Ora, ogni volta che qualcuno richiede nuovi contenuti dal server, puoi visualizzare l'effetto di caricamento della schermata di scheletro durante il caricamento dei dati. Sta diventando sempre più una tendenza di design popolare, come puoi vedere su siti come Google, Facebook e Slack.

Nel frattempo, se non conosci JavaScript, puoi imparare le basi comprendendo JavaScript e come interagisce con HTML e CSS.

Che cos'è JavaScript e come funziona?

Se stai imparando lo sviluppo web, ecco cosa devi sapere su JavaScript e come funziona con HTML e CSS.

Leggi Avanti

Circa l'autore