A Skeleton képernyők a látogatók megtartásának szerves részét képezik a modern design trendekben. A sebesség illúzióját keltik, és kezelik a felhasználók elvárásait azáltal, hogy tájékoztatják őket az oldal tartalmának állapotáról. Az egyik leglényegesebb, de alulértékelt megoldás, amelyet a csontváz képernyők kínálnak, az, hogy segítenek elkerülni Kumulatív elrendezéseltolás (CLS), amely lehetővé teszi, hogy a tartalom egyszerre jelenjen meg, nem pedig egymás után. terhelések.

Készen áll arra, hogy interfészeit intuitívabbá és kifejezőbbé tegye azáltal, hogy saját projektjeibe vázképernyőket épít be? Így kezdheti el.

Tervezze meg a weblap elrendezését

A weboldal elrendezésének megtervezése segít az elvárások kikristályosításában. Meg kell határoznia a célt, meg kell határoznia az elrendezést, adjon hozzá minden szükséges oldalt, és tegye elérhetővé és reagálóvá a különböző képernyőméretekhez. Egyelőre fontoljon meg egy egyszerű dizájnt borítóképpel, profilképpel, egy kis szöveggel és cselekvésre ösztönző gombokkal.

Miután elkészítette az elrendezés tervét, akár papírral, akár egy olyan alkalmazással, mint a Figma vagy az Adobe XD, ideje elkészíteni a HTML-struktúrát.

Építse fel az alapstruktúrát

Hozzon létre egy új fájlt index.html és írjon néhány HTML-t az elrendezéshez egy szülő belsejében val vel osztály=”profil-tároló”. Hozzáadás osztály = "csontváz" minden elemre a váz képernyőbetöltési hatásának alkalmazása érdekében. Ezt az osztályt eltávolítja, ha a tartalom JavaScript használatával kerül betöltésre.

jegyzet: Ne felejtse el linkelni a CSS és JavaScript fájlokat a fejlécében index.html fájlt.

gipsz Jakab

Szoftvermérnök @ Google || Full Stack Developer || Autodidakta

Bengaluru, Karnataka, India • Elérhetőségei


534 kapcsolat






Üzenet
Több

Kezdje el oldala stílusának kialakítását

Alkalmazza az alapvető CSS-attribútumokat, mint pl árrés, betűtípus család, és szín az egész testen.

body {
 margó: 0;
 font-család: Arial;
 szín: rgba (255, 255, 255, 0,9);
}

Betöltési effektus hozzáadása

Betöltési effektus hozzáadásához adjon hozzá egy ::utánapszeudo-elem a csontváz osztályhoz, amely egy-két másodperc alatt balról (-100%) jobbra (100%) mozog, ami csillogó animációt eredményez.

.skeleton {
 pozíció: relatív;
 szélesség: max-tartalom;
 túlcsordulás: rejtett;
 határsugár: 4 képpont;
 háttérszín: #1e2226 !fontos;
 szín: átlátszó !fontos;
 keretszín: #1e2226 !fontos;
 user-select: nincs;
 kurzor: alapértelmezett;
}
.skeleton img {
 átlátszatlanság: 0;
}
.skeleton:: after {
 pozíció: abszolút;
 felső: 0;
 jobbra: 0;
 alsó: 0;
 balra: 0;
 transzformáció: translateX(-100%);
 background-image: linear-gradient(
 90 fok,
 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)
 );
 animáció: shimmer 2s végtelen;
 tartalom: '';
}
@keyframes csillámlik {
 100% {
 transzformáció: translateX(100%);
 }
}

Stílusozd a képeket

Most alakítsuk ki a profil és a borítókép stílusát. Ne felejtse el beállítani túlcsordulás: rejtett; hogy elkerüljük az esetleges következetlenségeket.

img {
 szélesség: 100%;
 függőleges igazítás: középen;
}
.profile-container {
 szélesség: 95%;
 maximális szélesség: 780 képpont;
 margó: 0 auto;
 határsugár: 8 képpont;
 margó felső: 32 képpont;
 háttérszín: #1e2226;
 túlcsordulás: rejtett;
 pozíció: relatív;
}
.cover-img {
 szélesség: 100%;
 túlcsordulás: rejtett;
 háttérszín: #1e2226;
 képarány: 4/1;
}
.profile-img {
 határsugár: 50%;
 szélesség: 160 képpont;
 magasság: 160 képpont;
 keret: 4px tömör #000;
 háttérszín: #1e2226;
 margó: 0 auto;
 pozíció: relatív;
 túlcsordulás: rejtett;
 alsó: 100px;
}

Tedd reagálóvá

Annak érdekében, hogy a terv érzékeny legyen a különböző képernyőkön, alkalmazza ennek megfelelően a médialekérdezéseket. Ha kezdő vagy a webfejlesztésben, érdemes tanulnod hogyan kell használni a médialekérdezéseket HTML-ben és CSS-ben mert rendkívül fontosak a reszponzív webhelyek készítésénél.

@média (max. szélesség: 560 képpont) {
 .profile-img {
 szélesség: 100 képpont;
 magasság: 100 képpont;
 alsó: 60px;
 }
}

Stílusozd a szöveget

Stíluszzuk a szöveget a beállítással árrés, betűméret, és font-weight. Módosíthatja a szöveg színét, hozzáadhat címsort, bekezdést vagy horgonyt címkézze meg az Ön preferenciái szerint. A lebegő effektus hozzáadása a horgonycímkéhez hasznos, mert ez tájékoztatja a felhasználót a hivatkozásról.

.profile-text {
 margó felső: -80 képpont;
 padding: 0 16px;
}
.profile-text h1 {
 margó-alsó: 0;
 betűméret: 24 képpont;
 túlcsordulás: rejtett;
}
.profile-text p {
 margó: 4 képpont 0;
 túlcsordulás: rejtett;
}
.profile-text h5 {
 margó felső: 4 képpont;
 betűméret: 14 képpont;
 margó-alsó: 8 képpont;
 betűsúly: 400;
 szín: #ffffff99;
 túlcsordulás: rejtett;
}
.profile-text a {
 szín: #70b5f9;
 betűméret: 14 képpont;
 szöveg-dekoráció: nincs;
 betűsúly: 600;
}
.profile-text a: hover {
 szín: #70b5f9;
 szöveg-dekoráció: aláhúzás;
}

Stílusa a CTA

A cselekvésre ösztönzés (CTA) azért fontos, mert általában valamilyen módon meg szeretné változtatni a felhasználók látogatását. Ha könnyen észrevehető színt ad neki, akkor a CTA kiemelkedik az oldalon.

.profile-cta {
 padding: 16px 16px 32px;
 kijelző: flex;
}
.profile-cta a {
 padding: 6px 16px;
 határsugár: 24 képpont;
 szöveg-dekoráció: nincs;
 kijelző: blokk;
}
.message-btn {
 háttérszín: #70b5f9;
 szín: # 000;
}
.more-btn {
 szín: örököl;
 szegély: 1 képpont tömör rgba (255, 255, 255, 0,9);
 margó-bal: 8px;
}

Kimenet:

Kapcsolja ki a csontváz betöltési effektust JavaScript használatával

Most, hogy hozzáadta a vezető effektust a CSS használatával, ideje kikapcsolni a JavaScript használatával. Az animáció alapértelmezés szerint végtelen számú alkalommal ismétlődik, de azt szeretné, hogy csak néhány másodpercig fusson. Használatával beállíthatja az időt 4000 ezredmásodpercre setTimeout. 4 másodperc múlva eltávolítja a csontváz osztályt az összes elemből.

jegyzet: Feltétlenül adja hozzá közvetlenül a vége előtt szakasz.

const csontvázak = document.querySelectorAll('.skeleton')
csontvázak.forEach((csontváz) => {
 setTimeout(() => {
csontváz.classList.remove('csontváz')
 }, 4000)
})

Kimenet:

Mi az a JavaScript és hogyan működik?

Sikeresen létrehozott egy vázlatos képernyőbetöltési effektust HTML, CSS és JavaScript használatával. Mostantól, amikor bárki új tartalmat kér a szervertől, megjelenítheti a váz képernyő betöltési hatását az adatok betöltése közben. Egyre népszerűbb dizájntrend, ahogy az olyan oldalakon is látható, mint a Google, a Facebook és a Slack.

Eközben, ha még nem ismeri a JavaScriptet, megtanulhatja az alapokat a JavaScript és a HTML-lel és CSS-sel való interakciójának megértésével.

Mi az a JavaScript és hogyan működik?

Ha webfejlesztést tanul, a következőket kell tudnia a JavaScriptről, valamint arról, hogyan működik a HTML-lel és CSS-sel.

Olvassa el a következőt

A szerzőről