Legg til ui animasjoner på nettstedet ditt

Sep 13, 2025

hvordan

[1. 3]

De fleste ser brukergrensesnitt daglig, enten det er inne i en mobilapp eller på et nettsted, så det er viktig å få det riktig når du lager dem (a Nettstedbygger vil gjøre dette enkelt for deg), og hvis du kan oppleve dem med noen CSS animasjon , desto bedre.

Utforsk den nye grensen av CSS animasjon

Mens du bygger for nettet, spesielt når det gjelder animasjon, må du vurdere ting som nettleserstøtte og ytelse (anstendig Web Hosting. vil hjelpe her). I denne opplæringen skal vi gå deg gjennom to av de beste løsningene for å skape brukergrensesnittelser og overganger.

Vi vil bruke en kombinasjon av CSS og Greensock (GSAP). Vi er alle klar over CSS, men noen av dere kan ikke være klar over Greensock-plattformen. Greensock er et Javascript-rammeverk som gjør at du enkelt kan lage fantastiske animasjoner med HTML-elementer med bare noen få linjer med kode.

Bilder og logoer har spesielt stått ut mye mer de siste årene. Hvor ofte bruker vi emojis i stedet for tekst? Mobilnavigasjoner synes å bruke ikoner i stedet for tekst og over tidsbrukere som kommer til å vite hvor hver vil ta oss. Vi skal begynne med å lage en animert navigasjonsbar bare ved hjelp av logoer. Når du svinger over hver og en, vil den animere til den endelige tilstanden, som vil ligne lignende dette skjermbildet. Fikk mye media å legge til? Tilbake det opp i skylagring .

UI animations: icons — Vi har de seks navigasjonsikonene, og en av dem viser seg hvordan Hover-staten vil se ut når animasjonen er fullført

Bygge navigasjonen

Først og fremst vil vi opprette en ny index.html-fil og sette opp navigasjonsområdet sammen med seks lenker. Hver lenke vil bli gjort opp av et ikon tatt fra Ionicons. Vi må tilordne en klasse til hver.

 & lt; div class = "navigasjonsbar" & gt;
& lt; a href = "#" class = "navlogo ion-ios-stjerne-utkobling" & gt; & lt; / a & gt;
& lt; a href = "#" class = "Navlogo ion-iOS-list-Outline" & gt; & lt; / a & gt;
& lt; a href = "#" class = "navlogo ion-iOS-chatboxes-shootline" & gt; & lt; / a & gt;
& lt; a href = "#" class = "navlogo ion-ios-home-shoeng" & gt; & lt; / a & gt;
& lt; a href = "#" class = "navlogo ion-ios-pie-outline" & gt; & lt; / a & gt;
& lt; a href = "#" class = "navlogo ion-iOS-girkasse" & gt; & lt; / a & gt;
& lt; / div & gt;

Vi vil ikke dekke hele HTML- eller CSS-dokumentet i detalj, men du kan Få full kodeoppføring fra GitHub .

Deretter må vi opprette en CSS-fil som kalles Style.CSS og deretter sette inn følgende kode for å importere Ionicons:

 @Import URL (https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);

Vi vil nå sette opp klassen Navlogo. For våre navigasjonsbilder inne i stilarket. Her vil vi sette opp posisjonen, høyden, skriftstørrelsen etc.

 .navlogo {
  posisjon: relativ;
  Font-størrelse: 40px;
  Bredde: 75px;
  margin: 40px;
  Høyde: 75px;
  linjehøyde: 75px;
  Skjerm: Inline-blokk;
  farge: #fff;
}

.navlogo: etter {
  posisjon: absolutt;
  Topp: 0;
  Bunn: 0;
  Venstre: 0;
  Høyre: 0;
  Border: 2px Solid # E6E6E6;
  innhold: '';
  Z-indeks: -1;
  Border-Radius: 50%;
}

Deretter må vi sette opp animasjonen for vår .navlogo. element. Her vil vi skape rotasjons- og overgangseffekter, samt endre elementets farge på svinger.

 .navlogo: Før,
.navlogo: etter {
  -Webkit-overgang: alle 0,45s brukervennlige ut;
  Overgang: Alle 0.45s brukervennlige;
}
.navlogo: Hopp,
.navlogo: Aktiv,
.navlogo.hover {
  Farge: # C0392B;
}
.navlogo: Hopp: Etter,
.navlogo: Aktiv: Etter,
.navlogo.hover: etter {
  Border-farge: Transparent # C0392B;
  -WebKit-transform: Roter (360DEG);
  Transform: Roter (360DEG);
}

Endelig må vi legge til en hendelse som fjerner hover-klassen når musen ikke lenger svinger over våre logoer. Dette er for å sikre at vår logo kommer ut av animasjonen. Opprett en ny JavaScript-fil som heter Main.js og skriver deretter inn følgende kode:

 $ (". Hover"). Mouseleave (
  funksjon () {
    $ (dette) .removlass ("hover");
  }
);

Vår navigasjon er nå klar til å gå, bortsett fra å legge til noen hyperkoblinger. Vi har klart å oppnå dette bare ved å bruke CSS3.

Opprett og animere knapper på last

UI animations: animated buttons — Knappene vil vises en etter en med en sekunders forsinkelse i mellom. Greensock gjør det mulig for deg å gjøre dette med etht HTML-element

Vi vil nå legge til fire knapper til vår side og bruke Greensock-biblioteket til å sakte ta inn hver knapp, en etter den andre med en annen forsinkelse. Dette vil skape en fin overgangseffekt.

Først må vi gjenåpne index.html-filen og opprette vår knappseksjon ved hjelp av koden nedenfor:

 & lt; div id = "buttonarea" & gt;
& lt; button class = "anibutton" & gt; endre bakgrunnsfarge og lt; / knappen & gt;
& lt; knappeklasse = "anibutton" & gt; alternativ 1

Vi må da sette opp en referanse til Greensock-biblioteket inne i & lt; head & gt; seksjon.

 & lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/tweenmax.min.js" & gt;

Til slutt må vi sette opp animasjonen vår. Dette vil bare ta en linje med kode. Staggerfrom. er en funksjon som vil svimme starttidspunktet for vårt element. I våre parentes spesifiserer vi navnet på elementet. I dette tilfellet ville det være .Anibutton. . Vi må også sette en varighet, og i dette tilfellet er det satt til ett sekund mellom hver anibutton. element.

 tweenmax.Staggerfrom ('. Anibutton', 1, {opacity: 0}, 1);

Bakgrunn og Element Farge Overgang

UI animations: colour transition — Slik vil brukeren se etter bakgrunnen og knappen overgang fra en farge til en annen

Den neste tingen vi skal se på, er å overføre nettstedets bakgrunn og knapper fra en farge til en annen. Vi kommer ikke ofte over denne funksjonen på nettsteder, selv om det definitivt ville være interessant for ting som tilgjengelighet eller for web app-preferanser når brukeren kanskje vil sette sin egen fargevalg.

Pass på at du har en bakgrunnsfarge og en grense og tekstfarge som er satt opp for siden din i filen style.css.

 .Anibutton {
Border: 2px solid # 000;
Farge: # 000;
}

Deretter vil vi opprette en JavaScript-funksjon for å sette opp våre forskjellige Greensock-fargeoverganger.

 Funksjon Changebackground ()
{
   Tweenmax.to ("kropp", 3, {bakgrunnsmage: "lineær gradient (til venstre, # 646580, # 212121)"});
   Tweenmax.to (". Anibutton", 3, {farge: "# fff"});
   Tweenmax.to (". Anibutton", 3, {grensen: "2px solid #fff"});
}

Vi går for mer av en mørk modus ser her, så bakgrunnen vil bli mørk, men knappene vil vises lys. Den første linjen med koden vil endre bakgrunnsfargen til en mørkere variasjon over en periode på tre sekunder. Den andre og tredje linjen vil endre fargen og grensen til teksten til hvit over en periode på tre sekunder.

Til slutt må vi ringe Bytt bakgrunn() Funksjon fra en av våre knapper som finnes i index.html-filen.

 & lt; button class = "anibutton" onclick = "Changebackgrounds ()" & gt; endre bakgrunn & lt; / knappen & gt;

Prosjektet er nå klar til å kjøre. Selvfølgelig kan du gå mye lenger ved å legge til nye elementer og endre fargestilen for de også.

Denne artikkelen ble opprinnelig publisert i utgave 309 av nett , verdens bestselgende magasin for webdesignere og utviklere. Kjøp problem 309 her eller Abonner her .

Relaterte artikler:

Animere og bytte titler med CSS
5 tips for super-rask CSS
En introduksjon til CSS tilpassede egenskaper

Legg til ui animasjoner på nettstedet ditt

Bygge navigasjonen

Opprett og animere knapper på last

Bakgrunn og Element Farge Overgang

hvordan - Mest populære artikler

Kom i gang med flamme maleren

Procreate Tutorial: Hvordan male som de gamle mestere

30 KeyShot Rendering Tips

Opprett et responsivt layout med CSS-rutenett

Bygg skalerbare responsive komponenter

Skarpe dine skisseferdigheter

Lag en logo i Illustrator

Hvordan lage en snapchat geofilter i Photoshop

Kategorier