Hvordan lage glitchtekst og bildeeffekter i CSS

I denne opplæringen viser vi deg hvordan du lager en feiltekst effekt. Spesielle effekter og animasjoner kan hjelpe nettsteder skiller seg ut, og skaper en umiddelbar innvirkning på brukeren før de har hatt en sjanse til å komme inn i å lese hovedinnholdet. Hvis din hjemmeside trenger å wow besøkende, kan du lage tonnevis av forskjellige effekter ved hjelp av bare CSS.

Vår prosess for å lage glitchtekst her er faktisk ganske lik arbeid med animasjonsprogramvare. Vi legger nøkkelrammer på bestemte punkter, og bruker disse til å kontrollere handlingen. Forskjellen med nøkkelrammer i CSS er at de er skrevet som prosentandeler for tidslinjen for animasjon i koden. Dette er ikke noe i nærheten som skremmende som det høres ut - når du prøver det, er det relativt greit å oppnå gode resultater. Vil du ha gode resultater uten koding? Prøv A. Nettstedbygger . Og hold nettstedet ditt løper jevnt med høyre Web Hosting. service.

Det vil bli en liten mengde JavaScript som brukes i opplæringen - for å fjerne lasteskjermen når bildene lastes på siden - men hovedfokuset her er på CSS animasjon . Vi bruker også CSS GRID å posisjonere elementer på skjermen.

• Last ned opplæringsfilene Fra filsilo (gratis, innlogging kreves)

01. Få satt opp

For å komme i gang, åpne start mappe fra den Prosjektfiler inne i kodeditoren din. Åpne index.html. Side, som inneholder bare en barebones Skeleton HTML-side. I hoveddelen trenger skriftene å koble opp slik at designet viser riktig. Legg til stilforbindelsen for fonter.

<link href="https://fonts.googleapis.com/css?family=IM+Fell+English|Playfair+Display:900"rel="stylesheet">

02. Link CSS

Den grunnleggende layoutet i CSS er startet i Site.css Fil, men alle viktige delene knyttet til glitcheffekten kommer til å bli lagt til senere. I hoveddelen av dokumentet lenke opp CSS, slik at den grunnleggende utformingen av siden er på plass.

 & lt; link rel = "Stylesheet" Type = "Tekst / CSS"
href = "css / site.css" / & gt; 

03. Sett opp en lasteskjerm

Flytt nå til kroppsdelen av siden. Dette inneholder alle de synlige elementene i siden som dukker opp i nettleseren. Her legger du i en div som holder "Preloader-skjermen" til alt på siden er lastet inn. Dette vil vise en logo i midten av siden.

 & lt; div id = "loader" class = "loading" & gt;
       & lt; div class = "loading-logo" & gt; "img / logo.svg" class = "logo" & gt; & lt; / div & gt;
   & lt; / div & gt; 

04. Legg til en overskriftslinje

Langs toppen av skjermen vil det være en liten topptekst som inneholder en SVG-logo for nettstedet til venstre med en tekstoverskrift. Deretter på høyre side av skjermen vil en inline-meny være på plass for enkel navigering. Kodenes struktur her legger til disse elementene på siden.

 & lt; div class = "contentfixed" & gt;
       & lt; header class = "header" & gt;
           & lt; h1 class = "headertitle" & gt; & lt; img
src = "img / logo.svg" klasse = "logo" & gt; Haccercon & lt; / h1 & gt;
       & lt; / header & gt;
       & lt; nav class = "meny" id = "sitenav" & gt;
           & lt; ul & gt;
               & lt; a href = "index.html" & gt; home & lt; / a & gt; & lt; / li & gt;
               & lt; a href = "news.html" & gt; news & lt; / a & gt;
               & lt; a href = "contact.html" & gt; kontakt & lt; / a & gt; & lt; / li & gt;
               & lt; a href = "about.html" & gt; om & lt; / a & gt; & lt; / li & gt;
           lt; / ul & gt;
       & lt; / nav & gt;
   & lt; / div & gt; 

05. Legg til bilder

Nå er delen som følger inneholder flere versjoner av det samme bildet i glitchit. klasse. Hva dette vil gjøre er å ha forskjellige deler av disse bildene slått på og av på forskjellige tidspunkter for å gi en glitcheffekt. Etter dette er teksten som vil sitte over toppen av bildene.

& lt; div class = "innhold" & gt;
       & lt; div class = "glitch" & gt;
            & lt; div class = "glitchit" & gt; & lt; / div & gt;
            & lt; div class = "glitchit" & gt; & lt; / div & gt;
            & lt; div class = "glitchit" & gt; & lt; / div & gt;
            & lt; div class = "glitchit" & gt; & lt; / div & gt;
            & lt; div class = "glitchit" & gt; & lt; / div & gt;
       & lt; / div & gt;
       & lt; div class = "contentsction" & gt;
       & lt; h2 class = "contenttitle" & gt; hacker & lt; / span & gt; & lt; / h2 & gt;
          & lt; p class = "contenttext" & gt; Legg til en beskrivelse & lt; / p & gt;
           & lt; / div & gt;
       & lt; / div & gt; 

06. Trigger The Glitch Text Effect

På slutten av kroppsinnholdet er Javascript-koder plassert. Alt dette gjør det er å kontrollere at siden er lastet og fjerner lasteskjermen, som i sin tur utløser glitcheffekten animasjonen for å starte med å legge til en klasse i kroppen for å påvirke de relevante feilene.

 & lt; script & gt;
       VAR Loader = Document.GetelementByid ('Loader');
       window.addeventlistener ("last",
funksjon (hendelse) {
           loader.classlist.
fjern ('lasting');
           loader.classlist.add ('lastet');
           Dokument.body.classlist.
Legg til ('imgloaded');
       });
& lt; / script & gt; 

07. Sett opp CSS-variabler

Lagre siden nå og flytt over til Site.css fil i mappen CSS. Det er allerede kode her, men rett over en annen kode, legg til i variablene som er vist nedenfor. Disse CSS-variablene vil holde farger og størrelser som vil bli brukt senere i designet.

 Kropp {
   --Kolor-tekst: #fff;
   -Color-BG: # 000;
   --Color-Link: # 555;
   --Color-Link-Hover: # 98FADF;
   --Color-info: # f7cfb9;
   flitch-width: 100vw;
   flitch-høyde: 100vh;
   - Gap-horisontal: 10px;
   - Gap-vertical: 5px;
   - Tids-anim: 4S;
   --Delay-anim: 2s; 

08. Eksperiment med variable innstillinger

Som du vil se, blir disse variablene tildelt kroppsmerket slik at de kan brukes av en hvilken som helst tag på siden inne i kroppen, som i hovedsak er all den synlige siden. Her er gjennomsiktigheten og blandingsmodusene satt opp for de forskjellige bildene. Det er fem bilder, og du kan eksperimentere med disse innstillingene for å få forskjellige resultater.

 - Blend-modus-1: Ingen;
   - Blend-modus-2: Overlegg;
   - Blend-modus-3: Ingen;
   - Blend-modus-4: Ingen;
   - Blend-modus-5: Overlegg;
   - Blend-farge-1: Transparent;
   - Blend-farge-2: # 7D948E;
   - Blend-farge-3: gjennomsiktig;
   - Blend-farge-4: Transparent;
   - Blend-farge-5: # AF4949;
} 

09. Fyll skjermen med bilder

For å holde koden pent sammen, bla ned til kommentaren som markerer trinn 9 til 13 i CSS-filen, og legger til i denne koden. Her posisjonerer glitchoden div. som inneholder alle bilder for å fylle hele skjermen og plasseres helt øverst til venstre på skjermen. MERK Det blir bredden og høyden fra CSS-variablene.

 .glitch
{
   posisjon: absolutt;
   Topp: 0;
   Venstre: 0;
   Bredde: Var (- Glitch-bredde);
   Høyde: VAR (- Glitchhøyde);
   Overflow: Skjult;
} 

10. Juster bildeposisjonering

Siden glitcheffekten består av kopier av det samme bildet, posisjonerer denne koden hver div. På siden og gjør det litt større enn skjermen. Den posisjonerer den av toppen og venstre for å ta hensyn til at det er større, og bildet plasseres deretter i bakgrunnen for å fylle bildet.

 .glitchit {
   posisjon: absolutt;
   Topp: Calc (-1 * var (- Gap-vertical));
   Venstre: Calc (-1 * var (- Gap-horisontal));
   Bredde: Calc (100% + var (- Gap-horisontal) *
2);
   Høyde: Calc (100% + VAR (- Gap-Vertical) *
2);
   Bakgrunn: URL (../ IMG / Main.jpg) No-Repeat
50% 0;
   Bakgrunnsfarge: Var (- Blend-farge-1);
   Bakgrunnsstørrelse: Deksel;
   forvandle: translate3d (0, 0, 0);
   Bakgrunnsblandingsmodus: Var (- Blend-
modus-1);
} 

11. Velg bilder

Koden her velger hvert bilde unntatt det første bildet. Dette skyldes at det første bildet forblir på siden, mens de andre slår på og av over toppen med keyframe-animasjonen. Disse toppbildene er skjult til de trengs med opacitetssettet til null.

 .Glitchit: NTH-barn (N + 2) {
   opasitet: 0;
}
.imgoaded .glitchit: nth-child (n + 2) {
   Animasjon-Varighet: Var (- Time-Anim);
   Animasjon-forsinkelse: Var (- Delay-Anim);
   animasjon-timing-funksjon: lineær;
   animasjon-iterasjon-teller: uendelig;
} 

12. Juster bilder to og tre

Det andre og tredje bildet er satt til å animere i denne koden. De får de respektive blandings- og fargemodusene slik at de dukker opp annerledes. Den største forskjellen her er at de får forskjellige keyframe-animasjoner til å følge med å blande.

 opp effektene.
.imgloaded .glitchit: nth-child (2) {
   Bakgrunnsfarge: Var (- Blend-farge-2);
   Bakgrunnsblandingsmodus: Var (- Blend-
modus-2);
   Animasjonsnavn: Glitch-1;
}
.imgloaded .glitchit: nth-child (3) {
   Bakgrunnsfarge: Var (- Blend-farge-3);
   Bakgrunnsblandingsmodus: Var (- Blend-
modus-3);
   Animasjonsnavn: Glitch-2;
} 

13. Juster bilder fire og fem

Denne gangen er de neste to bildene satt opp ganske nær de andre, men igjen denne gangen er det forskjellige blandingsmoduser og animasjoner for disse bildene som skal vises. Nøkkelrammene er ennå ikke opprettet for noen av disse animasjonene, og som kommer neste gang.

 .imgloaded .Glitchit: NTH-barn (4) {
   Bakgrunnsfarge: Var (- Blend-farge-4);
   Bakgrunnsblandingsmodus: Var (- Blend-
modus-4);
   Animasjonsnavn: Glitch-3;
}
.imgoaded .glitchit: nth-child (5) {
   Bakgrunnsfarge: Var (- Blend-farge-5);
   Bakgrunnsblandingsmodus: Var (- Blend-
modus-5);
   animasjonsnavn: glitch-flash;
} 

14. Legg til det første settet med keyframes

Keyframes arbeider ved å gripe forskjellige deler av bildet og klippe det ned så bare det vil være synlig. Opaciteten er slått på og av på forskjellige tidspunkter, slik at deler av bildet er synlige på forskjellige tidspunkter til de andre animasjonene og dermed skaper glitcheffekten. Bildet flyttes litt på x-aksen.

 @keyframes glitch-1 {
   0% {
       opasitet: 1;
       Transform: Translate3D (var (- gap-
horisontal), 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. Bruk klippet banen

Klippbanen tar et rektangel, slik at de to første tallene er øverst til venstre, og deretter øverst til høyre. Dette følges av nederst til høyre og nederst til venstre. Ved å flytte disse tallene blir forskjellige deler av bildet synlige på forskjellige 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 bevegelsen

Ved å flytte klippet banen så raskt over en rekke nøkkelrammer, bygger effekten opp og forskjellige deler av bildet ser ut til å blinke rundt på en uregelmessig måte. Legg til at flere lag med bilder gjør også dette, og effekten fungerer veldig bra på hva det gjø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. Fullfør bildeglene

Etter 22% er bildet slått av til animasjonen spilles tilbake igjen. Dette fullfører glitch-1. effekt med. glitch-2. og glitch-3. allerede leveres i koden. Den neste delen vil gi teksten som er over toppen av bildet også.

 21,9% {
       opasitet: 1;
       Transform: Translate3D (var (- gap-
horisontal), 0, 0);
   } 22%, 100% {
       opasitet: 0;
       forvandle: translate3d (0, 0, 0);
       Clip-Path: Polygon (0 0, 0 0, 0 0, 0
0);
   }
} 

18. Hvordan lage glitchtekst

Denne koden fungerer ekstremt på samme måte som den forrige koden, bortsett fra at den flytter teksten opp ned og deretter klemmer det, for å gi en hoppende effekt som flyttes dramatisk. Etter at klippet banen avslører bare mindre seksjoner, med den raske bevegelsen gjennom nøkkelrammer.

 @keyframes glitch-text {
   0% {
       Transform: Translate3D (Calc (-1 *
var (- Gap-horisontal)), 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. Mer klipping

Effekten fortsetter i denne delen av koden ved raskt å endre formen på klippingen. De klipp-sti kommer også med -webkit- Prefiks, men for korthet har dette ikke blitt vist i noen av koden her. På tidspunktet for skriving er klippesti ikke støttet i IE, EDGE eller Opera Mini, men er i alle andre nettlesere.

 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. Vri teksten tilbake

I den endelige teksten glitch animasjonen flipper teksten tilbake til sin opprinnelige posisjon og venter på at nøkkelrammene kommer rundt igjen. Som du kan se all animasjonen foregår i 10 prosent mens den forblir sovende i 90 prosent av tiden, noe som gir teksten den rette mengden nød og slik at den kan leses.

 9% {
       Clip-Path: Polygon (0 70%, 100% 70%,
100% 80%, 0 80%);
   } 9,9% {
       Transform: Translate3D (Calc (-1 *
var (- Gap-horisontal)), 0, 0) Scale3D (-1, -1,
1);
   } 10%, 100% {
       Transform: Translate3D (0, 0, 0)
skala3d (1, 1, 1);
       Clip-Path: Polygon (0 0, 100% 0, 100%
100%, 0% 100%);
   }
} 

21. Lag en rask blits

Det endelige trinnet er at ett bilde får glitch-flash-animasjonen, og denne serien av keyframes plasserer bare bildet på skjermen med en 20 prosent opacitet i en kort periode bare for å gi en kompensasjon av originalen. Lagre CSS-filen nå, og effekten skal begynne å spille når innholdet lastes i nettleseren.

 @keyframes glitch-flash {
   0%, 5% {
       opasitet: 0,2;
       Transform: Translate3D (var (- gap-
horisontal), var (- Gap-vertikal), 0);
   } 5,5%, 100% {
       opasitet: 0;
       forvandle: translate3d (0, 0, 0);
}} 

Fikk et sted sikkert å lagre designfilene dine? Hvis ikke, trenger du vår guide til skylagring alternativer.

Denne artikkelen ble opprinnelig publisert i Creative Web Design Magazine webdesigner. Kjøp utgave 281. eller abonnere .

Les mer:

• Legg til en glitcheffekt på nettstedet ditt
• 10 fantastiske nye CSS-teknikker
• Lag collage effekter i nettleseren med CSS