Fügen Sie UI-Animationen Ihrer Website hinzu

Feb 12, 2026

wie man

Die meisten Leute sehen die Benutzeroberflächen täglich, egal ob in einer mobilen App oder auf einer Website, sodass es wichtig ist, dass Sie es richtig machen, wenn Sie sie erstellen (a Webseitenersteller wird das für Sie einfach machen), und wenn Sie sie mit einigen beleben können CSS-Animation. , umso besser.

Erkunden Sie die neue Grenze der CSS-Animation

Beim Bau des Webs, insbesondere wenn es um Animation geht, müssen Sie Dinge wie Browserunterstützung und -leistung in Betracht ziehen (anständig) Web-Hosting wird hier helfen). In diesem Tutorial gehen wir durch zwei der besten Lösungen zum Erstellen von UI-Animationen und -transements.

Wir werden eine Kombination von CSS und verwenden GreenSock (GSAP). Wir sind alle auf CSS bewusst, aber einige von Ihnen sind der GreenSock-Plattform möglicherweise nicht bekannt. GreenSock ist ein JavaScript-Framework, mit dem Sie einfach umwerfende Animationen mit HTML-Elementen mit nur wenigen Codezeilen erstellen können.

Die Bilder und der Logos standen in den letzten Jahren besonders viel mehr aus. Wie oft verwenden wir Emojis eher als Text? Mobile Navigationen scheinen Symbole als Text zu verwenden, anstatt Text zu verwenden, und über Zeit können Benutzer wissen, wo sich jeder bringt. Wir werden anfangen, eine animierte Navigationsleiste zu erstellen, die nur mit Logos verwendet wird. Wenn Sie überhaupt schweben, wird es dem endgültigen Zustand animieren, der diesem Screenshot ähnlich aussehen wird. Hast du viele Medien zum Hinzufügen? Zurück wieder in Cloud-Speicherung. .

UI animations: icons — Wir haben die sechs Navigationssymbole, und einer von ihnen zeigt, was der Hover-Status aussieht, wie die Animation abgeschlossen ist

Die Navigation bauen

Zunächst erstellen wir eine neue Datei index.html und richten Sie unseren Navigationsbereich zusammen mit sechs Links ein. Jeder Link besteht aus einem von Ionicons entnommenen Symbols. Wir müssen jedem eine Klasse zuweisen.

 & lt; div class = "navigationst bar" & gt;
& lt; ein href = "#" class = "navlogo ion-ios-star-rissline" & gt; & lt; / a & gt;
& lt; ein href = "#" class = "navlogo ion-ios-list-rissline" & gt; & lt; / a & gt;
& lt; ein href = "#" class = "navlogo ion-ios-chatboxes-rissline" & gt; & lt; / a & gt;
& lt; ein href = "#" class = "navlogo ion-ios-home-rissline" & gt; & lt; / a & gt;
& lt; a href = "#" class = "navlogo ion-ios-pie-rissline" & gt; & lt; / a & gt;
& lt; ein href = "#" class = "Navlogo Ion-ios-Getriebe" & gt; & lt; / a & gt;
& lt; / div & gt;

Wir werden nicht das vollständige HTML- oder CSS-Dokument im Detail abdecken, aber Sie können Holen Sie sich den gesamten Code-Liste von GitHub .

Als Nächstes müssen wir eine CSS-Datei erstellen, die als style.css heißt, und geben Sie dann die folgende Codezeile an, um Ionicons zu importieren:

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

Wir werden jetzt die Klasse einrichten Navlogo Für unsere Navigationsbilder innerhalb des Stylesheets. Hier richten wir die Position, Höhe, Schriftgröße usw. ein.

 .Navlogo {
  Position: relativ;
  Schriftgröße: 40px;
  Breite: 75px;
  Marge: 40px;
  Höhe: 75px;
  Linienhöhe: 75px;
  Anzeige: Inline-Block;
  Farbe: #FFF;
}

.Navlogo: After {
  Position: absolut;
  oben: 0;
  unten: 0;
  links: 0;
  Rechts: 0;
  Border: 2px solide # E6E6E6;
  Inhalt: '';
  Z-Index: -1;
  Grenzradius: 50%;
}

Als nächstes müssen wir die Animation für unsere einrichten .Navlogo. Element. Hier erstellen wir die Rotations- und Übergangseffekte sowie das Ändern der Elementfarbe auf dem Hover.

 .Navlogo: vorher,
.Navlogo: After {
  -webkit-Übergang: Alle 0,45 s Ease-In-Out;
  Übergang: Alle 0,45 s Ease-In-Out;
}
.Navlogo: Hover,
.Navlogo: aktiv,
.Navlogo.hieb {
  Farbe: # C0392B;
}
.Navlogo: Hover: danach,
.Navlogo: aktiv: danach,
.Navlogo.hieb: after {
  Grenzfarbe: transparent # C0392B;
  -Webkit-Transformation: Drehen (360DEG);
  Transformation: Drehen (360DEG);
}

Schließlich müssen wir ein Ereignis hinzufügen, das die Hover-Klasse entfernt, wenn die Maus nicht mehr über unsere Logos schwebt. Dies soll sicherstellen, dass unser Logo aus der Animation herauskommt. Erstellen Sie eine neue JavaScript-Datei namens main.js und geben Sie den folgenden Code ein:

 $ (". Hover"). MouseFeave (
  Funktion () {
    $ (diese) .removeclass ("Hover");
  }
);

Unsere Navigation ist jetzt bereit zu gehen, abgesehen von der Hinzufügung einiger Hyperlinks. Wir haben es geschafft, dies nur mit CSS3 zu erreichen.

Schaltflächen anlegen und animieren

UI animations: animated buttons — Die Tasten erscheint von einem mit einer eins-Sekunden-Verzögerung dazwischen. GreenSock ermöglicht es Ihnen, dies mit einem beliebigen HTML-Element zu tun

Wir fügen nun vier Tasten auf unserer Seite hinzu und verwenden die GreenSock-Bibliothek, um langsam jede Taste mit einer nacheinander mit einer Sekundarverzögerung mit einer Sekunde zu bringen. Dies schafft einen schönen Übergangseffekt.

Zunächst müssen wir die Datei index.html erneut öffnen und den Abschnitt Button mit dem untenstehenden Code erstellen:

 & lt; div id = "buttonarea" & gt;
& lt; Button-Klasse = "Anibutton" & GT; Hintergrundfarbe ändern & lt; / button & gt;
& lt; Button-Klasse = "Anibutton" & GT; Option 1 & lt; / button & gt;
& lt; Button-Klasse = "Anibutton" & GT; Option 2 & lt; / button & gt;
& lt; Button-Klasse = "Anibutton" & GT; Option 3 & lt; / button & gt;
& lt; / div & gt;

Wir müssen dann einen Verweis auf die GreenSock-Bibliothek im Inneren des & lt; head & gt; Sektion.

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

Schließlich müssen wir unsere Animation einrichten. Dies dauert nur eine Codezeile. Staggerfrom. ist eine Funktion, die die Startzeit unseres Elements stirbt. In unseren Klammern geben wir den Namen des Elements an. In diesem Fall wäre es .anibutton. . Wir müssen auch eine Dauer einstellen, und in diesem Fall ist es in diesem Fall eingestellt Anibutton. Element.

 TweenMax.stagger- ('. Anibutton', 1, {Deckkraft: 0}, 1);

Hintergrund- und Elementfarbübergang

UI animations: colour transition — So kümmert sich die Benutzeroberfläche um den Hintergrund- und Buttonübergang von einer Farbe zum anderen

Das nächste, was wir ansehen werden, ist, den Website-Hintergrund und die Knöpfe von einer Farbe zu einem anderen zu veranlassen. Wir kommen oft nicht auf dieser Funktion auf Websites, obwohl es auf jeden Fall interessant für Dinge wie Zugänglichkeit oder für Web-App-Voreinstellungen wäre, wenn der Benutzer möglicherweise ein eigenes Farbschema einstellen möchte.

Stellen Sie sicher, dass Sie eine Hintergrundfarbe und eine Rand- und Textfarbe haben, die für Ihre Seite in der Datei style.css eingerichtet ist.

 .anibutton {
Rand: 2px fest # 000;
Farbe: # 000;
}

Als Nächstes erstellen wir eine JavaScript-Funktion, um unsere verschiedenen GreenSock-Farbübergänge einzurichten.

 Funktionsänderungsbereich ()
{
   Tweenmax.to ("Körper", 3, {BackgroundFimage: "Linear-Gradient (nach links, # 646580, # 212121)"});
   Tweenmax.to (". Anibutton", 3, {Farbe: "# FFF"});
   Tweenmax.to (". Anibutton", 3, {Border: "2px solide #fff"});
}

Wir gehen hier mehr einen dunklen Modus, sodass der Hintergrund dunkel sein wird, aber die Knöpfe erscheinen leicht. Die erste Codezeile ändert die Hintergrundfarbe auf eine dunklere Variation über einen Zeitraum von drei Sekunden. Die zweite und dritte Zeile wechselt die Farbe und den Rand des Textes über einen Zeitraum von drei Sekunden.

Schließlich müssen wir das anrufen Hintergrund ändern() Funktion von einem unserer Schaltflächen in der Datei index.html.

 & lt; Button-Klasse = "Anibutton" Onclick = "Wechselbackground ()" und GT; Hintergrund ändert & lt; / button & gt;

Das Projekt ist jetzt bereit zu laufen. Natürlich können Sie noch viel weitergehen, indem Sie neue Elemente hinzufügen und den Farbstil für diese ändern.

Dieser Artikel wurde ursprünglich in Ausgabe 309 von veröffentlicht Netz Das weltweit meistverkaufte Magazin für Webdesigner und Entwickler. Kaufen Sie das Thema 309 hier oder Abonnieren Sie hier .

Zum Thema passende Artikel:

Animieren und Titel wechseln mit CSS
5 Tipps für superschnelle CSS
Eine Einführung in CSS-Eigenschaften

Fügen Sie UI-Animationen Ihrer Website hinzu

Die Navigation bauen

Schaltflächen anlegen und animieren

Hintergrund- und Elementfarbübergang

wie man - Die beliebtesten Artikel

Wie man Storyboard in Photoshop

Ist Ihr Apple iCloud-Speicher voll? So können Sie den Raum freimachen

Wie zeichnet man einen Wolf

Erstellen einer WebGL-3D-Landing-Seite

Erstellen Sie atemberaubende Landschaften in Houdini

Wie ein Schnappen in 3D-Apps arbeitet

Modell Darth Vader in Zbrush

So stärken Sie die Hautschattierung in 3D

Kategorien