Voeg UI-animaties toe aan uw site

Sep 12, 2025

Procedures

De meeste mensen zien de gebruikersinterfaces per dag, of het nu in een mobiele app of op een website staat, dus het is belangrijk om het goed te krijgen bij het maken van ze (a website bouwer zal dit eenvoudig voor je maken), en als je ze met sommigen kunt verlevendigen CSS-animatie , des te beter.

Ontdek de nieuwe grens van CSS-animatie

Tijdens het bouwen voor het web, vooral als het gaat om animatie, moet je dingen overwegen als browserondersteuning en -prestaties (fatsoenlijk web hosting zal hier helpen). In deze tutorial gaan we je door twee van de beste oplossingen lopen voor het maken van UI-animaties en overgangen.

We zullen een combinatie van CSS gebruiken en GreenSock (GSAP). We zijn allemaal bewust van CSS, maar sommigen van jullie zijn zich misschien niet op de hoogte van het GreenSock-platform. GreenSock is een JavaScript-framework waarmee u eenvoudig verbluffende animaties met HTML-elementen kunt maken met slechts een paar regels code.

Afbeeldingen en logo's hebben met name de afgelopen jaren veel meer uitgeschakeld. Hoe vaak gebruiken we emojis in plaats van tekst? Mobiele navigaties lijken pictogrammen te gebruiken in plaats van tekst en na verloop van tijd komen gebruikers te weten waar elk ons zal nemen. We gaan beginnen met het maken van een geanimeerde navigatiebalk die alleen logo's gebruiken. Wanneer je over elke ochtend beweegt, zal het animeren naar de eindstatus, die lijkt op deze screenshot. Heb je veel media om toe te voegen? Back it up in cloud opslag

UI animations: icons — We hebben de zes navigatiepictogrammen en een van hen pronkt met wat de Hover-status eruit zal zien als de animatie is voltooid

Bouw de navigatie

Allereerst zullen we een nieuw index.html-bestand maken en ons navigatiegebied instellen, samen met zes links. Elke link zal bestaan uit een pictogram uit ionicons. We moeten een klasse toewijzen aan elk.

 & lt; div class = "Navigationbar" & GT;
& LT; A HREF = "#" -klasse = "Navlogo ion-iOS-Star-Outline" & GT; & LT; / A & GT;
& lt; een href = "#" klasse = "Navlogo ion-iOS-lijst-outline" & GT; & LT; / A & GT;
& lt; een href = "#" class = "Navlogo ion-iOS-chatboxes-outline" & GT; & LT; / A & GT;
& LT; A HREF = "#" -klasse = "Navlogo ion-iOS-Home-Outline" & GT; & LT; / A & GT;
& lt; een href = "#" class = "Navlogo ion-iOS-taart-outline" & gt; & lt; / a & gt;
& lt; een href = "#" klasse = "Navlogo ion-iOS-gear-outline" & GT; & LT; / A & GT;
& lt; / div & gt;

We zullen niet het volledige HTML- of CSS-document in detail bedekken, maar dat kan Download de volledige code van Github

Vervolgens moeten we een CSS-bestand maken dat stijl wordt genoemd. CSSS en vervolgens de volgende regel code invoeren om ionicons te importeren:

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

We zullen nu de klasse opzetten Navlogo Voor onze navigatiebeelden in de stylesheet. Hier zullen we de positie, hoogte, lettergrootte enz. Opzetten enz.

. Navlogo {
  Positie: familielid;
  FONT-SIZE: 40PX;
  Breedte: 75px;
  Marge: 40px;
  Hoogte: 75px;
  Lijnhoogte: 75px;
  Display: Inline-Block;
  Kleur: #fff;


.navlogo: na {
  Positie: absoluut;
  Top: 0;
  onderkant: 0;
  Links: 0;
  RECHTS: 0;
  Grens: 2px vaste # E6E6E6;
  inhoud: '';
  Z-index: -1;
  Border-Radius: 50%;
}

Vervolgens moeten we de animatie opzetten voor onze .navlogo element. Hier zullen we de rotatie- en overgangseffecten creëren, evenals het veranderen van de elementkleur op zweven.

. Navlogo: eerder,
.navlogo: na {
  -Webkit-Transition: alle 0.45s gemak-in-out;
  Overgang: alle 0,45s gemak-in-out;

. Navlogo: zweven,
.navlogo: actief,
.navlogo.hover {
  Kleur: # C0392B;

. Navlogo: zweef: na,
. Navlogo: Actief: na,
.navlogo.hover: na {
  grenskleur: transparant # C0392B;
  -Webkit-Transform: Roteren (360DEG);
  Transformeren: Roteren (360DEG);
}

Ten slotte moeten we een gebeurtenis toevoegen die de hover-klasse verwijdert wanneer de muis niet langer over onze logo's zweeft. Dit is om ervoor te zorgen dat ons logo uit de animatie komt. Maak een nieuw Javascript-bestand met de naam Main.js en voer vervolgens de volgende code in:

 $ (". Hover"). Mouseleave (
  functie () {
    $ () .Removeclass ("zweven");
  
);

Onze navigatie is nu klaar om te gaan, afgezien van het toevoegen van enkele hyperlinks. We zijn erin geslaagd om dit te bereiken door CSS3 te gebruiken.

Maak en animeer knoppen op belasting

UI animations: animated buttons — De knoppen verschijnen één voor één met een vertraging in één seconde. GreenSock stelt u in staat dit te doen met elk HTML-element

We zullen nu vier knoppen aan onze pagina toevoegen en gebruiken de GreenSock-bibliotheek om langzaam op elke knop te brengen, een na de ander met een vertraging van één seconde. Dit zal een mooi overgangseffect creëren.

Ten eerste moeten we het index.html-bestand opnieuw openen en onze knop Sectie maken met behulp van de onderstaande code:

 & LT; DIV ID = "BODAREA" & GT;
& lt; knoopklasse = "Anibutton" & GT; verander achtergrondkleur & lt; / knop & GT;
& LT; Knoopklasse = "Anibutton" & GT; Optie 1 & LT; / Button & GT;
& LT; Knopklasse = "Anibutton" & GT; Optie 2 & LT; / Button & GT;
& LT; Knopklasse = "Anibutton" & GT; Optie 3 & LT; / knop & GT;
& lt; / div & gt;

We moeten dan een verwijzing opzetten naar de GreenSock-bibliotheek in het & LT; Hoofd & GT; sectie.

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

Ten slotte moeten we onze animatie opzetten. Dit duurt slechts één regel code. Staggerfrom is een functie die de starttijd van ons element zal prikkelen. In onze haakjes specificeren we de naam van het element. In dit geval zou het zijn .anibutton We moeten ook een duur instellen en in dit geval is het ingesteld op één seconde tussen elk anibutton element.

 tweenmax.staggerfrom ('. Anibutton', 1, {Dekking: 0}, 1);

Achtergrond en element Kleurovergang

UI animations: colour transition — Dit is hoe de UI op de achtergrond en de knop overgang van de ene kleur naar de andere zal zorgen

Het volgende ding waar we naar kijken, is het overgaan van de website Achtergrond en knoppen van de ene kleur naar de andere. We komen niet vaak tegen deze functie op websites, hoewel het zeker interessant zou zijn voor dingen zoals toegankelijkheid of voor webapp-voorkeuren wanneer de gebruiker hun eigen kleurenschema zou willen instellen.

Zorg ervoor dat u een achtergrondkleur en een rand- en tekstkleur hebt ingesteld voor uw pagina in het bestand Style.css.

 .Ibutton {
Grens: 2px Solid # 000;
Kleur: # 000;
}

Vervolgens maken we een JavaScript-functie om onze verschillende GreenSock-kleurenovergangen in te stellen.

 Functie Wisselbackground ()

   Tweenmax.to ("lichaam", 3, {backgroundimage: "lineair-gradiënt (naar links, # 646580, # 212121)"});
   Tweenmax.to (". Anibutton", 3, {kleur: "# fff"});
   Tweenmax.to (". Anibutton", 3, {Border: "2px solide #fff"});
}

We gaan hier voor meer van een donkere modus kijken, dus de achtergrond is donker, maar de knoppen zullen licht lijken. De eerste code van de code zal de achtergrondkleur veranderen in een donkerdere variatie gedurende een periode van drie seconden. De tweede en de derde regel verandert de kleur en rand van de tekst in een periode van drie seconden in wit.

Ten slotte zullen we de verander de achtergrond() Functie van een van onze knoppen gevonden in het bestand index.html.

 & lt; knop class = "anibutton" onclick = "Wisselbackground ()" & GT; Achtergrond wijzigen & LT; / knop & GT;

Het project is nu klaar om te rennen. Natuurlijk kun je veel verder gaan door nieuwe elementen toe te voegen en de kleurstijl voor die ook te veranderen.

Dit artikel is oorspronkelijk gepubliceerd in kwestie 309 van netto- , 's werelds best verkochte magazine voor webontwerpers en ontwikkelaars. Koop Probleem 309 hier of Abonneer hier

Gerelateerde artikelen:

Animeer en schakel titels met CSS
5 tips voor supersnelle CSS
Een inleiding tot CSS-aangepaste eigenschappen

Voeg UI-animaties toe aan uw site

Bouw de navigatie

Maak en animeer knoppen op belasting

Achtergrond en element Kleurovergang

Procedures - Meest populaire artikelen

Hoe een roos te tekenen: Beginner en geavanceerde tips

Aan de slag met GreenSock-animatieplatform

Een achtergrond verwijderen in Photoshop

Maak een eenvoudige kleurenkaart

Maak een geanimeerd 3D-teksteffect

19 tips voor Great Poser Art

Hoe heerlijke texturen te maken met potloden

Een realistische CG-doek maken

Categorieën