Kuidas luua tõrke teksti- ja pildiefekte CSS-is

Selles õpetuses näitame teile, kuidas luua tõrke tekstiefekti. Spetsiaalsed efektid ja animatsioonid aitavad veebisaitidel silma paista, tekitades kasutajale kohese mõju, enne kui neil on olnud võimalus põhisisu lugeda. Kui teie koduleht peab külastajaid vaimustama, saate lihtsalt CSS-i abil luua palju erinevaid efekte.

Meie siinne tõrke teksti loomise protsess on tegelikult üsna sarnane animatsioonitarkvaraga töötamisele. Paigutame võtmekaadrid kindlatesse punktidesse ja kasutame neid toimingu juhtimiseks. Erinevus CSS-i võtmekaadritest on see, et need kirjutatakse koodis animatsiooni ajaskaala protsentidena. See pole kuskil nii hirmutav kui see kõlab - kui proovite, on heade tulemuste saavutamine suhteliselt lihtne.

Õpetuses kasutatakse väikest hulka JavaScripti - laadimisekraani eemaldamiseks, kui pildid lehele laaditakse -, kuid põhirõhk on siin CSS-i animatsioon . Kasutame ka CSS Grid elementide paigutamiseks ekraanile.

01. Pange end paika

Alustamiseks avage algus kaust projekti failid koodiredaktori sees. Ava index.html leht, mis sisaldab lihtsalt barebones skeleti HTML-lehte. Head jaotises vajavad fondid linkimist, nii et kujundus kuvatakse õigesti. Lisage fondide stiililink.

CSS-i põhilist paigutust on alustatud sait.css faili, kuid kõik olulised tõrkefektiga seotud osad lisatakse hiljem. Dokumendi peaosas linkige CSS üles nii, et lehe põhikujundus oleks paigas.

03. Seadistage laadimisekraan

Must avakuva koos brändi ikooniga

Seda ekraani kuvatakse lehe laadimise ajal

Nüüd liikuge lehe kehaosasse. See sisaldab kõiki lehe nähtavaid elemente, mis kuvatakse brauseris. Lisage siia div, mis hoiab eellaadija ekraani seni, kuni kõik lehel on laaditud. See kuvab lehe keskel logo.

04. Lisage päiseriba

Must avakuva koos pealkirja ja lühikese kirjeldusega

Kujunduse põhielemendid, enne kui lisatakse tõrke tekstiefekt

Ekraani ülaosas on väike päis, mis sisaldab vasakul asuva saidi SVG-logo koos tekstipealkirjaga. Seejärel on ekraani paremas servas hõlpsaks navigeerimiseks paigutatud menüü. Siinne koodi struktuur lisab need elemendid lehele.

HackerCon

  • Home
  • News
  • Contact
  • About

05. Lisage pilte

Nüüd sisaldab järgmine jaotis sellesama pildi mitut versiooni glitchit klass. See tähendab, et nende piltide erinevad osad on eri aegadel sisse ja välja lülitatud, et anda tõrke mõju. Pärast seda on tekst, mis asub piltide ülaosas.

HackerCon

Add a description

06. Käivitage tõrke teksti efekt

Keha sisu lõppu paigutatakse JavaScripti sildid. Kõik see tähendab, et kontrollige, kas leht on laaditud, ja eemaldab seejärel laadimisekraani, mis omakorda käivitab tõrkeefektide animatsiooni, alustades kehale klassi lisamisega, et mõjutada vastavaid tõrkeid.

var loader = document.getElementById('loader'); window.addEventListener('load', function(event) { loader.classList. remove('loading'); loader.classList.add('loaded'); document.body.classList. add('imgloaded'); });

07. CSS-i muutujate seadistamine

Salvestage leht kohe ja liikuge lehele sait.css fail CSS-i kaustas. Siin on juba kood olemas, kuid otse teise koodi juurde lisage allpool näidatud muutujad. Need CSS-i muutujad mahutavad värve ja suurusi, mida kasutatakse hiljem kujunduses.

body { --color-text: #fff; --color-bg: #000; --color-link: #555; --color-link-hover: #98fadf; --color-info: #f7cfb9; --glitch-width: 100vw; --glitch-height: 100vh; --gap-horizontal: 10px; --gap-vertical: 5px; --time-anim: 4s; --delay-anim: 2s;

08. Katsetage muutuvate seadetega

Nagu näete, määratakse need muutujad kehamärgendile, nii et neid saab kasutada mis tahes silt keha sees oleval lehel, mis on sisuliselt kogu nähtav leht. Siin on erinevate piltide jaoks seadistatud läbipaistvus- ja segamisrežiimid. Pilte on viis ja nende tulemuste saamiseks saate nende seadetega katsetada.

--blend-mode-1: none; --blend-mode-2: overlay; --blend-mode-3: none; --blend-mode-4: none; --blend-mode-5: overlay; --blend-color-1: transparent; --blend-color-2: #7d948e; --blend-color-3: transparent; --blend-color-4: transparent; --blend-color-5: #af4949; }

09. Täitke ekraan piltidega

Koodi korralikult koos hoidmiseks kerige alla kommentaarini, mis tähistab CSS-failis toiminguid 9–13, lisades selle koodi. Siin asetab tõrke kood div sisaldab kõiki pilte täisekraani täitmiseks ja absoluutselt ekraani vasakus ülanurgas. Pange tähele, et selle laius ja kõrgus saadakse CSS-muutujate põhjal.

.glitch { position: absolute; top: 0; left: 0; width: var(--glitch-width); height: var(--glitch-height); overflow: hidden; }

10. Reguleerige pildi positsioneerimist

Lisatud täisekraanifotoga koduleht

Glitch-efekt kasutab sama pildi ümberpaigutatud koopiaid

Kuna tõrke efekt koosneb sama pildi koopiatest, paigutatakse see kood igaüks div lehel ja muudab selle ekraanist veidi suuremaks. See asetab selle ülaosast ja vasakule, et arvestada selle suurusega, ja pilt asetatakse seejärel pildi täitmiseks taustale.

.glitchit { position: absolute; top: calc(-1 * var(--gap-vertical)); left: calc(-1 * var(--gap-horizontal)); width: calc(100% + var(--gap-horizontal) * 2); height: calc(100% + var(--gap-vertical) * 2); background: url(../img/main.jpg) no-repeat 50% 0; background-color: var(--blend-color-1); background-size: cover; transform: translate3d(0, 0, 0); background-blend-mode: var(--blend- mode-1); }

11. Valige pildid

Siin olev kood valib kõik pildid, välja arvatud esimene pilt. Seda seetõttu, et esimene pilt jääb lehele, samal ajal kui teised lülituvad võtmekaadri animatsiooniga ülevalt sisse ja välja. Need parimad pildid on peidetud, kuni neid on vaja, kui läbipaistmatus on seatud nulli.

.glitchit:nth-child(n+2) { opacity: 0; } .imgloaded .glitchit:nth-child(n+2) { animation-duration: var(--time-anim); animation-delay: var(--delay-anim); animation-timing-function: linear; animation-iteration-count: infinite; }

12. Reguleerige pilte kaks ja kolm

Teine ja kolmas pilt on selles koodis animeeritud. Neile antakse vastav segu- ja värvirežiim, nii et need kuvatakse erinevalt. Suurim erinevus on siin see, et neile antakse segamiseks erinevaid võtmekaadri animatsioone.

up the effects. .imgloaded .glitchit:nth-child(2) { background-color: var(--blend-color-2); background-blend-mode: var(--blend- mode-2); animation-name: glitch-1; } .imgloaded .glitchit:nth-child(3) { background-color: var(--blend-color-3); background-blend-mode: var(--blend- mode-3); animation-name: glitch-2; }

13. Reguleerige nelja ja viit pilti

Seekord on järgmised kaks pilti seadistatud üsna lähedale teistele, kuid seekord on nende piltide kuvamiseks erinevad segamisrežiimid ja animatsioonid. Mõne sellise animatsiooni jaoks pole võtmekaadreid veel loodud ja see tuleb järgmisena.

.imgloaded .glitchit:nth-child(4) { background-color: var(--blend-color-4); background-blend-mode: var(--blend- mode-4); animation-name: glitch-3; } .imgloaded .glitchit:nth-child(5) { background-color: var(--blend-color-5); background-blend-mode: var(--blend- mode-5); animation-name: glitch-flash; }

14. Lisage esimene võtmekaadrite komplekt

Võtmekaadrid töötavad haarates pildi erinevad sektsioonid ja lõigates selle alla, nii et ainult see on nähtav. Läbipaistmatus lülitatakse erinevatel aegadel sisse ja välja, nii et pildi osad on teistele animatsioonidele eri aegadel nähtavad ja tekitab seeläbi tõrke efekti. Kujutist liigutatakse veidi x-teljel.

@keyframes glitch-1 { 0% { opacity: 1; transform: translate3d(var(--gap- horizontal), 0, 0); clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); } 2% { clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%); }

15. Kasutage clip-pathi

Klipi tee võtab ristküliku, nii et kaks esimest numbrit on üleval vasakul ja siis paremal ülal. Sellele järgnevad paremal ja all vasakul. Neid numbreid liigutades muutuvad pildi erinevad osad nähtavaks erinevates punktides.

4% { clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); } 6% { clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%); } 8% { clip-path: polygon(0 33%, 100% 33%, 1 00% 33%, 0 33%); } 10% { clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }

16. Kiirendage liikumist

Liigutades klipiteed nii kiiresti mitme võtmekaadri kohal, tekib efekt ja pildi erinevad osad näivad vilkuvat ebakorrapäraselt. Lisage, et seda teevad ka rohkem kihti pilte ja efekt töötab selle juures väga hästi.

12% { clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); } 14% { clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); }16% { clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); }18% { clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); }20% { clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); }

17. Lõpeta pildi tõrked

22% pärast lülitatakse pilt välja, kuni animatsioon uuesti esitatakse. See lõpetab tõrge-1 mõju koos tõrge-2 ja tõrge-3 juba koodis. Järgmine jaotis häirib ka teksti, mis on ka pildi ülaosas.

21.9% { opacity: 1; transform: translate3d(var(--gap- horizontal), 0, 0); } 22%, 100% { opacity: 0; transform: translate3d(0, 0, 0); clip-path: polygon(0 0, 0 0, 0 0, 0 0); } }

18. Kuidas luua tõrke teksti

Tekst on kärbitud, et näidata avalehel toimuva tõrke efekti

Tekst on lõigatud vaid lühidalt, et see oleks endiselt loetav

See kood töötab äärmiselt sarnaselt eelmisele koodile, välja arvatud see, et see pöörab teksti tagurpidi ja seejärel klammerdub, et anda dramaatiliselt liigutatud hüppefekt. Pärast seda näitab klipi tee ainult väiksemaid jaotisi, kusjuures võtmekaadritega saab kiiresti liikuda.

@keyframes glitch-text { 0% { transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0) scale3d(-1, -1, 1); clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%); } 2% { clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); } 4% { clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }

19. Rohkem lõikamist

Mõju jätkub selles koodilõigus, muutes kiiresti lõiketee kuju. The clip-tee kaasas ka -veebikomplekt eesliide, kuid lühiduse huvides pole seda siin ühes koodis näidatud. Kirjutamise ajal ei toeta Clip Path praegu IE, Edge ega Opera Mini, kuid see on kõigis teistes brauserites.

5% { clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); } 6% { clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); } 7% { clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); } 8% { clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); }

20. Pöörake tekst tagasi

Lõplikus teksti tõrke animatsioonis pööratakse tekst tagasi oma algsesse asendisse ja oodatakse, kuni võtmekaadrid uuesti ilmuvad. Nagu näete, toimub kogu animatsioon 10 protsendi ulatuses, samal ajal kui see jääb 90 protsenti ajast seisma, tekitades tekstile paraja stressi ja võimaldades seda lugeda.

9% { clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); } 9.9% { transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0) scale3d(-1, -1, 1); } 10%, 100% { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } }

21. Looge kiire välk

Glitch-efektiga koduleht on pooleli

Glitch-efekt töötab iga paari sekundi järel, et anda murelik ilme

Viimane samm on see, et ühele pildile antakse glitch-flash animatsioon ja see võtmekaadrite seeria asetab pildi lühikese aja jooksul 20-protsendise läbipaistmatusega ekraanile, et ainult originaali nihutada. Salvestage CSS-fail kohe ja efekti peaks mängima hakkama, kui sisu brauserisse laaditakse.

@keyframes glitch-flash { 0%, 5% { opacity: 0.2; transform: translate3d(var(--gap- horizontal), var(--gap-vertical), 0); } 5.5%, 100% { opacity: 0; transform: translate3d(0, 0, 0); } }

See artikkel ilmus algselt loomingulises veebidisaini ajakirjas Web Designer. Osta väljaanne 281 või telli .

Loe rohkem: