Mit SVG lassen sich in WordPress Animationen erstellen, die einen handgeschriebenen Effekt erzeugen. Eigentlich ist das ein Simulieren von ‘Text’. Diese Technik erfordert anfangs viel Übung und ist eher für kürzere Animationen wie beispielsweise einer SVG-Signatur geeignet. In diesem Beitrag wird beschrieben, wie man diesen Effekt erreichen kann. Beachte jedoch, dass das Erreichen dieses Effekts viel Zeit und Geduld erfordert und dass es wahrscheinlich mehr als nur ein paar Minuten dauern wird. Es ist in diesem Beitrag so gezeigt, welche von Websites hier sehr geholfen haben. – follow me, so für n’ Anfang.
Die Wegerl Artikelreihe mit Weil schlau und hilfreich einfach besser ist!
Zum Thema SVG-Text animieren
Im folgenden Artikel geht es um die Animation und Simulation von Texten mit SVG, welches eine Fortsetzung des Artikels SVG-Animation in WordPress. – so funktioniert’s ist. Es ist sehr empfehlenswert, den vorherigen Artikel zu lesen, um das Verständnis für die folgenden Themen zu erleichtern, ja zu ermöglichen.
Dort kann eine Schablone heruntergeladen werden, die dann im SVG-Programm nachgezeichnet werden kann.
Es ist am besten, die Vorlage in maximaler Größe herunterzuladen, z. B.:
Alternativ kann man auch die eigene Handschrift auf ein Blatt Papier schreiben und dann fotografieren. Das Bild kann dann im SVG-Editor geöffnet, ausgeschnitten und nachgezeichnet werden.
(3) Vorlage nachzeichnen und SVG erstellen
Diese Methode ist in zwei Teile unterteilt: das Maskieren des SVG und die Erstellung der Sequenzen (Making the layers).
Das Erstellen von Sequenzen erfordert einige diffizile Arbeitsschritte, aber es ist sehr nützlich für anspruchsvollere Animationen. Für eine einfachere Methode wie hier kann man den SVG-Code samt CSS für die Animation automatisch generieren lassen, was hier dann unter Pkt. (4) beschrieben wird. Aber es ist immer wichtig, die Grundlagen zu verstehen, deshalb ist die oben beschriebene Methode sehr hilfreich. – weil die Basic sind immer das wichtigste.
SVG-Editor
Öffne die Vorlage im SVG-Editor.
Wähle das Stiftwerkzeug oder Spline-Drawing-Tool.
Verwende Spline-Drawings wie Linie, Quad Bèzier, Cubic Bèzier oder ‘Catmull-Rom’. Die Animationen gelingen am Anfang besser mit Linien. Bei Kurven ist es besser, einen Punkt zu viel als zu wenig zu setzen. (Um die Dateigröße zu reduzieren, empfiehlt sich die Verwendung von SVGOMG, als da zum sparen anfangen). Nach einiger Übung ist es mit dem Spline-Typ ‘Catmull-Room’ gut möglich, aber eventuell nicht immer gut.
Stelle die Option “Füllen” auf “Keine” ein.
Die Strichbreite hängt von der verwendeten Schriftart ab. Beginne mit einer Strichbreite von 5 Pixeln und wähle die Farbe nach Belieben aus. Beides kann später angepasst werden.
Beginne mit dem Zeichnen! Es empfiehlt sich, die Strichdicke der Buchstaben mittig zu halten.
Die Schrift-Generierung bezieht sich nur auf die Vorlage! – das andere ist Handarbeit.
Mit dem Zeichnen beginnen! – am besten der Buchstaben Strichdicke mittig bleiben.
Das mit dem Nachzeichnen ist folgenden Video von CSS-TRICKS gezeigt. Ich darf hier die Sequenz von CSS-TRICKS wiederholen:
Das im Video ist mit Spline-Drawing von Typ ‘Catmull-Rom’. – ein geübter Zeichner tut sich leichter.
Anschließend kannst du die Striche anpassen. Verwende bei der Option “Line Cap” am besten “Round” für einen runden Abschluss des Striches. Bei “Line Join” kannst du auch “Round” wählen oder eventuell “Bevel” für eine abgeschrägte Verbindung ausprobieren. Experimentiere ein bisschen herum und finde heraus, was am besten zu deinem Schriftzug passt.
Das mit dem ‘Cap’ so oder so und das mit ‘Join’ kann Buchstabens auch individuell von Vorteil sein.
Wenn das Ergebnis sowie Strichstärke und Farbe zufriedenstellend sind, kann man das SVG als responsives Format speichern. Es ist wichtig daran zu denken, die Schablone spätestens vor dem Speichern zu entfernen. Danach kann man zum nächsten Schritt übergehen.
(4) SVG-Code samt CSS für die Animation
Hier geht es um die Animation mit dem erstellten SVG und CSS.
Die Zeitabschnitte sind auf SVG ARTISTA nicht separat aufgeteilt – das ist gut, damit das Programm auch für Anfänger geeignet bleibt. Die Sequenzen können im Nachhinein per Handarbeit einfach an das gewünschte Ergebnis angepasst werden. Für gelegentliche Animationen ist das durchaus praktikabel. Die Anmerkung mit den Sequenzen dient hier nur als erste Orientierungshilfe. – so zum ersten Durchblick mal.
Das Beispiel “7. Sequential Animation” von envato-tuts+ ist sehr hilfreich, um die Sequenzen besser zu verstehen.
Bild von ‘envato’ zur Sequential Animation
Im Folgenden unserem Beispiel bleibt der CSS-Code, der auf SVG ARTISTA erstellt wurde, unverändert. Die Sequenzen im CSS können jederzeit angepasst werden.
SVG-Editor und das CSS
Der SVG-Code, der mit SVG ARTISTA erstellt wurde, kann kopiert und in einen SVG-Editor wie z.B. Boxy SVG eingefügt werden. Die Größe des SVGs soll auch später anzupassen sein darum ist beim Speichern darauf zu achten, dass der Viewport auf “responsive” eingestellt ist. Anschließend kann das SVG in das WordPress-Backend hochgeladen werden.
Hier ist des SVG zu sehen, welche Class von SVG ARTISTA hizugefügt wurde.
Der Größe soll das SVG anzupassen sein, darum zum Speichern darauf achten, dass der Viewport auf Responsive seht.
Der CSS-Code von SVG ARTISTA sollte im Customizer oder im Childs Theme in die style.css eingefügt werden. Es ist sinNvoll, eine separate Klasse im CSS zu erstellen und diese Klasse:
allen @-webkit-keyframes und @keyframes sowie der -webkit-animation und animation beizufügen. In unserem Beispiel wird diese Klasse eva genannt. Für das kleine Beispiel gibt es nur fünf Blöcke, also von .svg-eva-1 bis .svg-eva-5, sowie die Keyframes.
Nochmal der Hinweis: wenn eine Website mehrere @keyframes-Animationen enthält, ist es wichtig, separate Klassen für jede Animation zu erstellen, um sicherzustellen, dass sie sich nicht überschneiden. Wenn sich die Animationen überschneiden, kann dies zu unerwarteten visuellen Effekten führen und die Website unprofessionell wirken lassen. Es ist daher ratsam, sorgfältig zu planen und die CSS-Regeln entsprechend zu organisieren, um eine reibungslose und ansprechende Animationserfahrung auf der Website sicherzustellen.
Das Editieren im Code-Editor
Das Hinzufügen von Selektoren und Attributwerten kann in jedem Code-Editor mit der Suchen- und Ersetzen-Funktion durchgeführt werden – für Mac mit “cmd+f” und für Windows mit “strg+f”. Es ist jedoch ratsam, dies in einer separaten, idealerweise leeren Datei durchzuführen, um sicherzustellen, dass nicht alle anderen Animationen im style.css ebenfalls geändert werden.
Im Beispiel sollte nach animate gesucht und durch eva-animate ersetzt werden.
Es ist möglich, die Selektoren zusammenzufassen, aber es kann von Vorteil sein, sie getrennt zu belassen, um eine bessere Strukturierung des Codes zu gewährleisten. Außerdem hat die Verwendung einer zusätzlichen Klasse ihre Vorteile. Zum Beispiel müssten alle Selektoren für den Pfad auch für alle SVG-EVA-Klassen definiert werden, wie z.B. svg-eva-1, svg-eva-2 usw. Außerdem ist das !important für den Pfad notwendig, da es im SVG selbst bereits definiert ist.
Anmerkung zum !important. Es sollte beachtet werden, dass das Verwenden von !important im Allgemeinen vermieden werden sollte, es sei denn, es ist unbedingt erforderlich. Es ist besser, die Spezifität der Selektoren zu erhöhen, um Konflikte mit anderen Stilen zu vermeiden.
Denkbarer Workflow
Was das Programm SVG ARTISTA für uns arbeitet, das geht aus folgenden Artikel im Titel Animieren Sie Ihre eigene SVG-Signatur hervor. Mit dabei ist der Tipp “4. All the Other SVG Attributes”. Da geht es dann, um häufig verwendete Attribute zu entfernen und diese stattdessen im CSS einfügen.
Bitte, wenn’s gefällt, aber von muss-sein ist das nicht! Denn mit von SVG ARTISTA generierten SVG sind durch die Classen auch das CSS ansprechbar.
Weiter von Beispiele den Suchmaschinen in Begriffen “dashoffset svg animation” oder “svg handschrift animation”, da ist unter Bilder noch mehr zu finden.
Und weil’s nun so lustig ist …
So in etwa der Einstellung auf SVG ARTISTA:
Der element class eigenen Namen zuweisen, animation type: Animation und für Handschrift SVG …
… der Staffelschritt (stagger step) höher ist als die Animationsdauer (animation duration).
Beitragsbild animieren
In WordPress wird das Titelbild normalerweise im Editor festgelegt. Somit ist nicht möglich, das Titelbild oder Beitragsbild direkt zu animieren, da die Animationen über einen Shortcode eingefügt werden. Um eine Animation als Titelbild einzufügen, muss dies über die functions.php-Datei unter Verwendung der Beitrag-ID und des entsprechenden Shortcodes erfolgen. Im folgenden Beispiel sind mehrere Animationen aufgeführt, und weitere die erstellt werden können.
Es ist wichtig zu beachten, dass diese Methode nur funktioniert, wenn dem Beitrag ein Bild als Platzhalter zugewiesen wird. Vorzugsweise dasselbe oder ähnliches, denn bspw. in den Embeds wird nur das Bild wiedergegeben, welches im Editor definiert ist. Ohne ein Beitragsbild wird das Bild, das über den Shortcode eingefügt wird, nicht visuell angezeigt. Die Funktion ersetzt lediglich das vorhandene Beitragsbild durch das SVG-Bild aus dem Shortcode.
Theme functions.php
function replace_post_thumbnail_with_svg($html, $post_id, $post_thumbnail_id, $size, $attr) {
if ($post_id == 123) {
$svg_shortcode = 'SVG file not found: /users/wegerl/www/wordpress/wp-content/themes/twentyfourteen-child/images/kulisse-1.svg';
$svg_image = do_shortcode($svg_shortcode);
$html = '<div class="post-thumbnail">' . $svg_image . '</div>';
}
if ($post_id == 456) {
$svg_shortcode = 'SVG file not found: /users/wegerl/www/wordpress/wp-content/themes/twentyfourteen-child/images/kulisse-2.svg';
$svg_image = do_shortcode($svg_shortcode);
$html = '<div class="post-thumbnail">' . $svg_image . '</div>';
}
// Weitere Bedingungen und Animationen hinzufügen
return $html;
}
add_filter('post_thumbnail_html', 'replace_post_thumbnail_with_svg', 10, 5);
Dieser Code ersetzt das Platzhalterbild oder jedes andere Bild durch die entsprechende Animation, wenn die Beitrag-ID übereinstimmt. Du kannst weitere Bedingungen und Animationen hinzufügen, indem du den Code entsprechend anpasst.
Bitte beachte, dass du die Beitrag-IDs und Shortcodes in diesem Beispiel entsprechend deinen eigenen Anforderungen zu ändern sind.
Am unteren Rand der SVG-Animation wird sich möglicherweise so schmaler Rand abzeichnen, das wiederum durch CSS aufzulösen ist, z. B.:
Es gibt viele weitere Tools im Web, aber diese erfordern eine separate Einarbeitung und scheinen für Profis ausgelegt zu sein. Ein besonders bekanntes Tool ist https://www.svgator.com/. Meiner Meinung nach ist es sehr komplex und eher für fortgeschrittene Anwender interessant.
Die Wegerl Artikelreihe mit 
Wird geladen ...