Hvordan lage en fade-in animasjonseffekt med JavaScript og CSS

Animasjoner, overganger og 3D-effekter er intet mindre enn en iøynefallende. Hver gang du bygger nettstedet ditt eller et prosjekt, vil du ikke at det skal gå seg vill i klyngen av millioner av nettsteder som er tilgjengelige på internett. Du vil at den skal skille seg ut, du vil at den skal underholde brukerne og bli lagret i deres underbevisste sinn. For å gjøre websidene dine mer spennende, må du bruke forskjellige animasjoner og sideovergangseffekter.

En av de populære og ekstremt interessante animasjonseffektene er Fade-in og Fade-Out Animasjon, som kan implementeres ved hjelp av JavaScript og HTML \ CSS.

Trinn 1: Sett opp grunnleggende side

Lag en ny HTML på din foretrukne kodeditor, lag et skript.JS -fil og en stil.CSS -fil så vel som vist:

Inne i HTML -filen, kobler du CSS -filen og skriptet.JS -fil ved hjelp av følgende linjer før kroppskoden:

Nå skal vi implementere en fade-in-animasjon på et bilde, og for bildet skal vi bruke et royaltyfritt bilde fra Unsplash. Du kan opprette en bildekode og en knapp som vi vil bruke for å falme inn og falme ut bildet med følgende linjer:

id = "image" src = "https: // bilder.Unsplash.com/photo-1640273837947-EA830D50C191?ixLib = RB-1.2.1 & ixid = mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8 & auto = format & fit = avling & w = 2072 & q = 80 "
alt = ""
/>


Falme effekt

Legg merke til at vi har gitt IDen "Bilde" til bildet og IDen til “MyButton” til knappen som vi oppretter.

Siden bildet er ganske stort, kommer vi til å sette en bestemt høyde og bredde i CSS -filen ved å bruke følgende linjer:

#bilde
Høyde: 200px;
Bredde: 200px;

Siden din skal se slik ut:

Vi har bildet vårt i midten av skjermen og rett under bildet vi har knappen vår.

Trinn 2: Endre CSS -filen

Det er mange måter å implementere en bestemt animasjon ved hjelp av CSS og JavaScript, men for akkurat dette innlegget skal vi spille med klasser og Opacity -attributtet til CSS. Endre CSS -filen din med følgende linjer:

#bilde
Opacitet: 1;
Overgang: Opacitet 0.3s Easy-in-Out;
Høyde: 200px;
Bredde: 200px;

#bilde.Fade
Opacitet: 0;

For å forklare hva vi gjør i linjene ovenfor: vi legger ganske enkelt bildet av bildet til 100% i starten og hvis bildet har en aktiv klasse "falme" da vil opacitet endre seg til 0%. Men denne opacitetsendringen vil skje i et tilfelle, for å gjøre en animasjonslignende effekt vi bruker overgangsattributtet og setter den til 0.3s.

Nå, alt vi trenger å gjøre er å skrive et manus som vil veksle klassen "Falme" fra bildet

Trinn 3: Å bytte klasse med JavaScript

I manuset.JS -fil, vi skal først hente bildeelementet og lagre det inne i en variabel, og så skal vi veksle klassen, men alt dette bør gjøres på knappen trykk. Så legg til følgende linjer i skriptfilen:

La image = dokument.getElementById ("image");
dokument.GetElementById ("MyButton").onClick = funksjon ()
bilde.Klasseliste.veksle ("Fade");
;

Så med dette bør vi også kunne implementere Fade-In-animasjonen og Fade-Out-overgangen.

Trinn 4: Testing av animasjonen vår

Det siste trinnet er å kjøre HTML -filen på vår lokale maskin og teste ut animasjonen på Button Press, du skal se følgende utdata:

Som du kan se i ovennevnte GIF at animasjonen vår fungerer perfekt.

Konklusjon

Animasjoner kan enkelt implementeres ved bruk av JavaScript sammen med HTML og CSS for å få websider til å se mye mer attraktive og iøynefallende. I dette innlegget lærte vi hvordan vi kan lage en fade-in og en fade-out-animasjon på et HTML-element ved å tilordne forskjellige CSS-egenskaper på klassen til elementet og deretter slå på klassene ved hjelp av JavaScript.