5 SVG-Animationen, um Ihr Webdesign zu beleben

Animationen können dazu führen, dass sich eine Website glatt und glatt anfühlt, aber wie können Sie diese Funktion in Ihre eigene Arbeit integrieren? Machen Sie mit und erfahren Sie, wie Sie Ihr Webdesign mit diesen kreativen SVG-Animationsbeispielen beleben können.

Arbeiten mit skalierbaren Vektorgrafiken

SVG ist ein Dateiformat, das zum Speichern und Anzeigen von Bildern Linien anstelle von Pixeln verwendet. Wie der Name schon sagt, können skalierbare Vektorgrafiken ohne Qualitätsverlust skaliert werden.

Sie eignen sich nicht nur hervorragend zum Ändern der Größe, sondern Sie können auch SVG-Code in HTML verwenden, der sich wie jedes andere Element verhält. Dies bedeutet, dass Sie verwenden können CSS-Regeln, JavaScript-Code, und vor allem Animationen mit den SVGs Ihrer Website.

Sie können SVGs mit Software wie Adobe Illustrator und Websites wie SVGator erstellen, aber Sie können sie auch von Hand erstellen. Das SVG-Format ist eine reine Text-XML-Sprache und sieht ein bisschen wie HTML aus.

Dieses Beispiel enthält vier Schaltflächen mit eigenen Symbolen und einem blockfarbenen Hintergrund. Wenn Sie eine Schaltfläche auswählen, ändert sie sich von einem Kreis in ein abgerundetes Rechteck, während sich gleichzeitig die Hintergrundfarbe der Seite an die Schaltfläche anpasst.

Eine Mischung aus JS und CSS erzeugt diese Ergebnisse, und alles beginnt mit einer Schleife that fügt Ereignis-Listener hinzu zu jeder Taste.

zum (Var ich = 0; i < menuItems.length; i++) {
 menuItems[i].addEventListener('klicken', ButtonKlick);
}

Sobald auf eine Schaltfläche geklickt wird, führt eine Funktion namens buttonClick() mehrere Aktionen aus. Es beginnt mit der Änderung der Hintergrundfarbe der Seite:

dokumentieren.body.style.backgroundColor = `#${diese.getAttribute('Datenhintergrund')}`;

Danach fügt es der gedrückten Schaltfläche eine CSS-Klasse hinzu, löst eine Animation aus und ändert die Hintergrundfarbe der Schaltfläche.

menuItemActive.classList.remove('menu__item--aktiv');
this.classList.add('menu__item--aktiv');
menuItemActive.classList.add('menu__item - animieren');
this.classList.add('menu__item - animieren');
menuItemActive = diese;

Dieses SVG-Animationsbeispiel ist zwar einfach, bietet aber eine einzigartige Möglichkeit, Ihre Website ansprechender zu gestalten. Diese Art von Design-Feature ist perfekt für mobile Websites und HTML-basierte Apps.

Sie können einem SVG-Pfad beliebig viele Knoten hinzufügen, was sie ideal zum Erstellen von Text macht. Diese einfache Strichanimation demonstriert die Technik perfekt, wobei der Text von links nach rechts erscheint, als würde er geschrieben.

Die Animation hat keine Keyframes, sie wendet einfach eine neue Strichbreite neben der CSS-Übergangseigenschaft an. Dadurch zieht sich jede Linie ohne komplizierte Animation über den Bildschirm.

.Pfad-1 {
 Schlaganfall-Dasharray: 1850 2000;
 Schlaganfall-Dashoffset: 1851;
 Übergang: 5s linear;
}

Eine JS-Funktion fügt jedem Abschnitt des Textes eine eindeutige CSS-Klasse hinzu, wobei eine einzige übergeordnete CSS-Klasse verwendet wird, um die Dichte des Codes weiter zu verringern.

$(Funktion() {
FunktionAnimationStart() {
 $('#Container').addClass('Flosse');
 }
setTimeout (animationStart, 250);
});

Als reines CSS-Beispiel eignet sich diese SVG-Animation hervorragend für alle, die sich nicht mit JavaScript-Code beschäftigen möchten. Die Idee ist einfach: Eine Schaltfläche beginnt mit einer Unterstreichung, die sich in einen vollständigen Rahmen verwandelt, wenn Sie mit der Maus darüber fahren.

CSS-Keyframes erstellen zwei Zustände für die Schaltfläche. Der erste Zustand hat einen dickeren Strich und bedeckt nur den unteren Rand der SVG-Formschaltfläche, beginnend bei 0 %. Der andere Zustand ist der vollständige Knopf bei 100 % mit einem dünneren Strich.

@Keyframes zeichnen {
 0% {
 Schlaganfall-Dasharray: 140 540;
 Stroke-Dashoffset: -474;
 Strichbreite: 8px;
 }
100% {
 Strich-Dasharray: 760;
 Stroke-Dashoffset: 0;
 Strichbreite: 2px;
 }
}

Diese Keyframes werden nur auf den Umriss der SVG-Form der Schaltfläche angewendet, wenn der Benutzer den Cursor über die Schaltfläche bewegt. Es verwendet das :hover CSS-Pseudoklasse Um dies zu erreichen, lösen Sie eine Regel aus, die die Animations-Keyframes zur Schaltfläche hinzufügt.

.svg-Wrapper:schweben.gestalten {
-webkit-animation: 00,5 Sekzeichnenlinearvorwärts;
Animation: 00,5 Sekzeichnenlinearvorwärts;
}

Dies zeigt, wie Sie schöne Animationen erstellen können, ohne komplexen Code zu verwenden. Sie können diese Grundlagen und Ihre Kreativität nutzen, um ausgefeiltere interaktive Elemente für Ihre eigene Website zu erstellen.

Bei so vielen interessanten Techniken unter der Haube ist es schwer zu entscheiden, was man besprechen soll, wenn man sich dieses Beispiel einer SVG-Uhr ansieht.

Zu Beginn verwendet es die Date()-Funktion, um das aktuelle Datum und die aktuelle Uhrzeit zu erfassen. Unter Verwendung dieses Werts teilen die Funktionen getHours(), getMinutes() und getSeconds() die Daten in ihre relevanten Teile auf. Der Code berechnet dann die Position jedes Zeigers auf der Uhr.

Var Datum = NeuDatum();
Var StundenWinkel = 360 * date.getHours() / 12 + date.getMinutes() / 2;
Var Minutenwinkel = 360 * date.getMinutes() / 60;
Var SekWinkel = 360 * date.getSeconds() / 60;

Indem jede der Hände in einem Array gespeichert wird, können ihre Positionen bei jeder Ausführung des Codes sehr einfach eingestellt werden.

hands[0].setAttribute('aus', Schalthebel (secAngle));
hands[0].setAttribute('zu', Schalthebel (secAngle + 360));
hands[1].setAttribute('aus', Schieber (minuteAngle));
hands[1].setAttribute('zu', Schieber (minuteAngle + 360));
hands[2].setAttribute('aus', Schieber (hoursAngle));
hands[2].setAttribute('zu', shifter (hoursAngle + 360));

Zeit hat im Bereich des Webdesigns begrenzte Anwendungen, ist aber nützlich für Countdown-Timer, Uhren und das Speichern von Zeitstempeln. Dieses Beispiel bietet auch einen Einblick in die Erstellung dynamischer SVG-Animationen mit Variablen.

Diese CSS-gesteuerte SVG-Animation bietet eine nette Möglichkeit, jedes Formular unglaublich aussehen zu lassen.

Wenn nichts ausgewählt ist, hat das Formular ausgegraute Linien unter jedem Feld. Wenn ein Feld ausgewählt wird, erscheint eine Linie, die mit einer glatten Animation von links hereingleitet. Wenn der Benutzer ein anderes Feld auswählt, gleitet die Linie in einer fließenden Bewegung an ihre neue Position.

Schließlich, sobald der Benutzer die drückt Anmeldung Taste, verwandelt sich die Linie in einen Kreis, der pulsiert, während die Seite geladen wird.

Dieses SVG-Beispiel ist besonders beeindruckend, da es nur auf CSS angewiesen ist, um ein so komplexes Ergebnis zu erzielen. Es verwendet CSS-Variablen zum Speichern von Daten, was die Steuerung von Elementen wie der Haupt-App erleichtert.

$app-Padding: 6vh;
$app-Breite: 50vh;
$app-Höhe: 90vh;
#app {
 Breite: $app-Breite;
 Höhe: $app-Höhe;
 Polsterung: $app-Polsterung;
 Hintergrund: weiß;
 Box Schatten: 002Rest RGB(Schwarz, 0.1);
}

Sie können dieses Beispiel in nahezu jedem Webformular verwenden und Ihre Benutzer wie nie zuvor ansprechen.

Erstellen Sie Ihre eigenen SVG-Animationen mit HTML, JS und CSS

Das Erstellen einer SVG-Animation von Grund auf kann am Anfang ein schwieriger Prozess sein. Diese Beispiele geben Ihnen den nötigen Vorsprung, um SVG-Animationen zu erstellen, die Ihre Website zum Strahlen bringen.

9 CSS-Tricks für erweiterte Medienabfragen, die Sie kennen sollten

Lesen Sie weiter

Über den Autor