Tilføj ui animationer til dit websted

Sep 11, 2025

hvordan

De fleste mennesker ser brugergrænseflader dagligt, om det er inde i en mobilapp eller på en hjemmeside, så det er vigtigt at få det rigtigt, når de opretter dem (A Website Builder. vil gøre det nemt for dig), og hvis du kan opleve dem med nogle CSS animation. , desto bedre.

Udforsk den nye grænse af CSS animation

Mens du bygger til internettet, især når det kommer til animation, skal du overveje ting som browser støtte og ydeevne (anstændigt Web Hosting. vil hjælpe her). I denne tutorial skal vi gå igennem to af de bedste løsninger til at skabe UI-animationer og overgange.

Vi vil bruge en kombination af CSS og Greensock. (GSAP). Vi er alle klar over CSS, men nogle af jer kan ikke være opmærksom på Greensock-platformen. Greensock er en JavaScript-ramme, der giver dig mulighed for nemt at skabe fantastiske animationer med HTML-elementer ved hjælp af blot et par linjer kode.

Billeder og logoer har især stået meget mere i løbet af de sidste par år. Hvor ofte bruger vi emojis snarere end tekst? Mobile navigeringer synes at bruge ikoner frem for tekst og over tid brugere kommer til at vide, hvor hver vil tage os. Vi skal starte med at oprette en animeret navigationslinje, der kun bruger logoer. Når du svæver over hver enkelt, vil det animere den endelige tilstand, som vil se ligner dette skærmbillede. Fik en masse medier at tilføje? Tilbage det op i Sky lagring .

UI animations: icons — Vi har de seks navigationsikoner, og en af dem viser, hvad Hover-staten vil se ud, når animationen er afsluttet

Byg navigationen

Først og fremmest vil vi oprette en ny indeks.html-fil og oprette vores navigationsområde sammen med seks links. Hvert link vil bestå af et ikon taget fra ionikoner. Vi skal tildele en klasse til hver.

 & lt; div class = "navigationbar" & gt;
& lt; en href = "#" klasse = "navlogo ion-iOS-star-outline" & gt; / lt; / a & gt;
& lt; en href = "#" klasse = "navlogo ion-iOS-list-outline" & GT; / lt; / a & gt;
& lt; en href = "#" klasse = "navlogo ion-iOS-chatboxes-outline" & GT; / lt; / a & gt;
& lt; en href = "#" klasse = "navlogo ion-ios-home-outline" & GT; / lt; / a & gt;
& lt; a href = "#" klasse = "navlogo ion-ios-pie-outline" & GT; / lt; / a & gt;
& lt; en href = "#" klasse = "navlogo ion-iOS-gear-outline" & gt; / lt; / a & gt;
& lt; / div & gt;

Vi dækker ikke hele HTML- eller CSS-dokumentet i detaljer, men du kan Få den fulde kode notering fra GitHub .

Dernæst skal vi oprette en CSS-fil, der kaldes Style.css og derefter indsætte følgende kode for kode for at importere ionikoner:

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

Vi vil nu oprette klassen navlogo. Til vores navigationsbilleder inde i stylesheet. Her vil vi oprette position, højde, skriftstørrelse mv.

 .navlogo {
  position: relativ;
  Font-størrelse: 40px;
  Bredde: 75px;
  Margin: 40px;
  Højde: 75px;
  Linjehøjde: 75px;
  Display: Inline-Block;
  Farve: #fff;
}

.navlogo: efter {
  position: absolut;
  TOP: 0;
  Bund: 0;
  Venstre: 0;
  Højre: 0;
  Border: 2px Solid # E6E6E6;
  indhold: '';
  z-index: -1;
  Border-radius: 50%;
}

Dernæst skal vi oprette animationen til vores .navlogo. element. Her vil vi skabe rotations- og overgangseffekter, såvel som at ændre elementfarven på svæve.

 .navlogo: Før,
.navlogo: efter {
  -webkit-overgang: Alle 0,45s lette-in-out;
  Overgang: Alle 0,45S lette-in-out;
}
.navlogo: svæve,
.navlogo: Aktiv,
.navlogo.hover {
  Farve: # C0392B;
}
.navlogo: Hover: Efter,
.navlogo: Aktiv: Efter,
.navlogo.hover: Efter {
  Border-Farve: Transparent # C0392B;
  -webkit-transformation: Drej (360deg);
  Transform: Drej (360deg);
}

Endelig skal vi tilføje en begivenhed, der fjerner svæveklassen, når musen ikke længere svæver over vores logoer. Dette er for at sikre, at vores logo kommer ud af sin animation. Opret en ny JavaScript-fil kaldet Main.js og indtast derefter følgende kode:

 $ (". Hover"). Mousleave (
  funktion () {
    $ (dette) .removeclass ("sving");
  }
);

Vores navigation er nu klar til at gå, bortset fra at tilføje nogle hyperlinks. Vi har formået at opnå dette lige ved at bruge CSS3.

Opret og animere knapper på belastning

UI animations: animated buttons — Knapperne vises en efter en med en engangs forsinkelse mellem. Greensock giver dig mulighed for at gøre dette med ethvert HTML-element

Vi tilføjer nu fire knapper til vores side og bruger Greensock-biblioteket til langsomt at medbringe hver knap, den ene efter den anden med en anden forsinkelse. Dette vil skabe en god overgangseffekt.

For det første skal vi genåbne INDEX.HTML-filen og oprette vores knapafsnit ved hjælp af koden nedenfor:

 & lt; div id = "knaparea" & gt;
& lt; knap klasse = "anibutton" & gt; skift baggrund farve & lt; / knap & gt;
& lt; knap klasse = "anibutton" & gt; option 1 & lt; / knap & gt;
& lt; knap klasse = "anibutton" & gt; option 2 & lt; / knap & gt;
& lt; knap klasse = "anibutton" & gt; option 3 & lt; / knap & gt;
& lt; / div & gt;

Vi skal derefter oprette en henvisning til Greensock-biblioteket inde i & lt; Head & GT; afsnit.

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

Endelig skal vi oprette vores animation. Dette vil kun tage en kodelinje. Staggerfrom er en funktion, der vil forskyde starttidspunktet for vores element. I vores parenteser angiver vi elementets navn. I dette tilfælde ville det være .anibutton. . Vi skal også sætte en varighed, og i dette tilfælde er den sat til et sekund mellem hver anibutton. element.

 Tweenmax.Stnerfrom ('. Anibutton', 1, {Opacitet: 0}, 1);

Baggrund og element farve overgang

UI animations: colour transition — Sådan ser brugeren ud efter baggrunden og knap overgang fra en farve til en anden

Den næste ting, vi skal se på, overfører webstedets baggrund og knapper fra en farve til en anden. Vi kommer ikke ofte på tværs af denne funktion på hjemmesider, selvom det helt sikkert ville være interessant for ting som tilgængelighed eller til webappindstillinger, når brugeren måske vil indstille deres egen farveskema.

Sørg for, at du har en baggrundsfarve og en grænse- og tekstfarve, der er oprettet til din side i Style.css-filen.

 .anibutton {
Border: 2px fast # 000;
Farve: # 000;
}

Dernæst opretter vi en JavaScript-funktion for at oprette vores forskellige Greensock-farveovergange.

 Funktionskifte ()
{
   Tweenmax.to ("Body", 3, {BackgroundImage: "Linear-gradient (til venstre, # 646580, # 212121)"});
   TweenMax.to (". Anibutton", 3, {farve: "# fff"});
   Tweenmax.to (". Anibutton", 3, {Border: "2px fast #fff"});
}

Vi går for mere af en mørk tilstand se her, så baggrunden bliver mørk, men knapperne vises lys. Den første kodelinje ændrer baggrundsfarven til en mørkere variation over en periode på tre sekunder. Den anden og tredje linje ændrer farven og grænsen til teksten til hvid over en periode på tre sekunder.

Endelig skal vi ringe til skift baggrund() Funktion fra en af vores knapper, der findes i indekset.html-filen.

 & lt; knap klasse = "anibutton" onclick = "changebackground ()" & gt; skift baggrund og lt; / knap & gt;

Projektet er nu klar til at køre. Selvfølgelig kan du gå meget længere ved at tilføje nye elementer og ændre farvestilen for dem også.

Denne artikel blev oprindeligt offentliggjort i udstedelse 309 af net , verdens bedst sælgende magasin til webdesignere og udviklere. Køb problem 309 her eller Abonner her .

Relaterede artikler:

Animere og switch titler med CSS
5 tips til super-hurtig CSS
En introduktion til CSS-brugerdefinerede egenskaber

Tilføj ui animationer til dit websted

Byg navigationen

Opret og animere knapper på belastning

Baggrund og element farve overgang

hvordan - Mest populære artikler

Sådan fjerner du rynker i Photoshop

Style et websted ved hjælp af SASS

Opret spøgelsesagtige teksturer med blandede medieteknikker

Opret et interaktivt parallaxbillede

Sådan kommer du i gang med typeskrift

Sådan laver du dine egne lærredskort

Sådan tager du dit vektor logo fra 2D til 3D

Opret 3D brandeffekter

Kategorier