Sådan oprettes fejl og teksteffekter i CSS

I denne vejledning viser vi dig, hvordan du opretter en glitch-teksteffekt. Specialeffekter og animationer kan hjælpe websteder med at skille sig ud og skabe en øjeblikkelig indvirkning på brugeren, før de har haft en chance for at komme ind i at læse hovedindholdet. Hvis din hjemmeside skal wow besøgende, kan du oprette masser af forskellige effekter ved hjælp af bare CSS.

Vores proces til oprettelse af glitch-tekst her ligner faktisk meget at arbejde med animationssoftware. Vi placerer nøglerammer på bestemte punkter og bruger disse til at kontrollere handlingen. Forskellen med nøglerammerne i CSS er, at de skrives som procenter for animationens tidslinje i koden. Dette er ikke nær så skræmmende som det lyder - når du først har prøvet det, er det relativt ligetil at opnå gode resultater.



Der bruges en lille smule JavaScript i vejledningen - for at fjerne indlæsningsskærmen, når billederne indlæses på siden - men hovedfokus her er på CSS animation . Vi bruger også CSS-gitter for at placere elementer på skærmen.



01. Kom i gang

For at komme i gang skal du åbne Start mappe fra projektfiler inde i din kode editor. Åbn index.html side, der kun indeholder en HTML-side med bareboneskelet. I hovedafsnittet skal skrifttyperne sammenkædes, så designet vises korrekt. Tilføj stillinket til skrifttyperne.

Det grundlæggende layout i CSS er startet i site.css fil, men alle de vigtige dele, der vedrører glitch-effekten, tilføjes senere. I hovedets sektion af dokumentet skal du forbinde CSS, så det grundlæggende design af siden er på plads.



03. Opret en indlæsningsskærm

Sort startskærm med mærkeikon

Denne skærm vises, mens siden indlæses

Gå nu til brødteksten på siden. Dette indeholder alle de synlige elementer på siden, der vises i browseren. Her tilføjes en div, der holder 'forudindlæsningsskærmen', indtil alt på siden er indlæst. Dette viser et logo midt på siden.

film med døren i titlen

04. Tilføj en overskriftslinje

Sort startskærm med titel og kort beskrivelse vist



De grundlæggende elementer i designet, før glitch-teksteffekten tilføjes

Langs toppen af ​​skærmen vil der være et lille overskrift indeholdende et SVG-logo til webstedet til venstre med en tekstoverskrift. Derefter vil en indbygget menu være på plads til højre for skærmen på højre side af skærmen. Kodens struktur her tilføjer disse elementer på siden.

HackerCon

  • Home
  • News
  • Contact
  • About

05. Tilføj billeder

Nu indeholder sektionen, der følger, flere versioner af det samme billede i glitchit klasse. Hvad dette vil gøre er at have forskellige dele af disse billeder slået til og fra på forskellige tidspunkter for at give en fejleffekt. Herefter følger teksten, der sidder øverst på billederne.

HackerCon

Add a description



06. Udløs glitch-teksteffekten

I slutningen af ​​kropsindholdet placeres JavaScript-tags. Alt dette gøres er at kontrollere, at siden er indlæst og derefter fjerne indlæsningsskærmen, hvilket igen udløser glitch-effektanimationen til at starte med at tilføje en klasse til kroppen for at påvirke de relevante fejlsektioner.



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

07. Opsæt CSS-variabler

Gem siden nu, og flyt over til site.css fil i CSS-mappen. Der er allerede kode her, men lige over enhver anden kode tilføjes variablerne vist nedenfor. Disse CSS-variabler indeholder farver og størrelser, der senere vil blive brugt i designet.

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. Eksperiment med variable indstillinger

Som du vil se, tildeles disse variabler til body-tagget, så de kan bruges af ethvert tag på siden inde i bodyen, hvilket stort set er hele den synlige side. Her er gennemsigtighed og blandingstilstande indstillet til de forskellige billeder. Der er fem billeder, og du kan eksperimentere med disse indstillinger for at få forskellige resultater.



--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. Fyld skærmen med billeder

For at holde koden pænt sammen skal du rulle ned til kommentaren, der markerer trin 9 til 13 i CSS-filen og tilføjer i denne kode. Her placerer fejlkoden positionen div der indeholder alle billeder for at udfylde hele skærmen og placeres absolut øverst til venstre på skærmen. Bemærk, at det får bredden og højden fra CSS-variablerne.

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

10. Juster billedpositionering

Hjemmeside med fuldskærmsbillede tilføjet

hvordan man retter hud i Photoshop
Glitch-effekten bruger repositionerede kopier af det samme billede

Da glitch-effekten består af kopier af det samme billede, placerer denne kode hver div på siden og gør den lidt større end skærmen. Det placerer det fra toppen og venstre for at tage højde for, at det er større, og billedet placeres derefter i baggrunden for at udfylde billedet.



.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. Vælg billeder

Koden her vælger hvert billede undtagen det første billede. Dette skyldes, at det første billede forbliver på siden, mens de andre tænder og slukker foroven med keyframe-animationen. Disse topbilleder skjules, indtil de er nødvendige med opaciteten sat til nul.

.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. Juster billeder to og tre

Det andet og tredje billede er indstillet til at animere i denne kode. De får de respektive blandings- og farvetilstande, så de vises forskelligt. Den største forskel her er, at de får forskellige keyframe-animationer at følge for at blande.

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. Juster billeder fire og fem

Denne gang er de næste to billeder sat tæt op til de andre, men igen er der forskellige blandingstilstande og animationer, som disse billeder kan vises. Keyframes er endnu ikke oprettet til nogle af disse animationer, og det kommer derefter.

.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. Tilføj det første sæt nøglerammer

Keyframes fungerer ved at tage fat i forskellige dele af billedet og klippe det ned, så kun det vil være synligt. Opaciteten tændes og slukkes på forskellige tidspunkter, så dele af billedet er synlige på forskellige tidspunkter for de andre animationer og dermed skaber glitch-effekten. Billedet flyttes let på x-aksen.

@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. Brug klipstien

Klipstien tager et rektangel, så de to første tal er øverst til venstre og derefter øverst til højre. Dette efterfølges af nederst til højre og nederst til venstre. Ved at flytte disse numre bliver forskellige dele af billedet synlige på forskellige punkter.

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. Fremskynde bevægelsen

Ved at flytte klipstien så hurtigt over et antal nøglerammer, opbygges effekten, og forskellige dele af billedet ser ud til at blinke rundt på en uregelmæssig måde. Tilføj, at flere lag af billeder også gør dette, og effekten fungerer meget godt, hvad den gør.

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. Afslut billedfejl

Efter 22% slukkes billedet, indtil animationen afspilles igen. Dette afslutter fejl-1 effekt med fejl-2 og fejl-3 leveres allerede i koden. Det næste afsnit glider også teksten, der er over toppen af ​​billedet.

nemme ting at tegne med trækul
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. Sådan oprettes fejltekst

Tekst beskåret for at vise glitch-effekt i gang på startsiden

Teksten klippes kun kort for at sikre, at den stadig kan læses

Denne kode fungerer yderst på samme måde som den forrige kode, bortset fra at den vender teksten på hovedet og derefter klipper den for at give en springende effekt, der flyttes dramatisk. Derefter afslører klipstien kun mindre sektioner med den hurtige bevægelse gennem keyframes.

@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. Mere klipning

Effekten fortsætter i dette afsnit af kode ved hurtigt at ændre formen på klipningsstien. Det klip-sti leveres også med -webkit- præfiks, men for kortfattethed er dette ikke vist i nogen af ​​koden her. I skrivende stund understøttes Clip Path i øjeblikket ikke i IE, Edge eller Opera Mini, men er i alle andre browsere.

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. Vend teksten tilbage

I den sidste glitch-animation vender teksten tilbage til sin oprindelige position og venter på, at nøglerammerne kommer rundt igen. Som du kan se, foregår hele animationen i 10 procent, mens den forbliver sovende i 90 procent af tiden, hvilket giver teksten den rigtige mængde nød og gør det muligt at læse den.

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. Opret en hurtig flash

Hjemmeside med glitch-effekt i gang

Glitch-effekten løber hvert par sekunder for at give et ubehageligt udseende

Det sidste trin er, at et billede får glitch-flash-animationen, og denne serie nøglerammer placerer bare billedet på skærmen med en 20 procent opacitet i en kort periode bare for at give en forskydning af originalen. Gem CSS-filen nu, og effekten skal begynde at afspilles, når indholdet indlæses i browseren.

@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); } }

Denne artikel blev oprindeligt offentliggjort i kreativt webdesignmagasin Web Designer. Køb nummer 281 eller abonnere .

Læs mere: