Willkommen beim WP Wegerl.at 'Lesemodus' + Tastaturnavigation!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus sowie die Tastaturbedienung.
WP Wegerl.at: Einzigartige Designs, optimiert für das Nutzererlebnis.
smilies.4-user.de

SVG-Animation in WordPress. – so funktioniert’s

SVG-Animation erstellt basierend auf einer Vorlage und die Illustration ('View') stammt von Gorkhs
Werbung

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.


Erleben Sie den Classic Editor neu!
(Bilder von pixelcreatures)


Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.




Werbung

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.


Classic Editor + Advanced Editor Tools
= Ihr Erfolgsrezept


Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.




Werbung

Einfach und intuitiv –
Der Classic-Editor für alle.


Classic Editor & Advanced Editor Tools
Erleben Sie es.


Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.




Werbung

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.


Optimieren Sie Ihre Bearbeitung:
Advanced Editor Tools


Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.





Die Einbindung von SVG-Animationen in WordPress-Inhalte ist dank der Website 'SVG ARTISTA' und einem minimalistischen Plug-in von Jackie D’Elia keine Zauberei. Mithilfe von JavaScript von WP-Freund kann die Animation so gesteuert werden, dass sie erst im Viewport abgespielt wird, wenn der Besucher sie auf dem Bildschirm hat. Dadurch wird sichergestellt, dass die Animation nicht vorzeitig abgespielt wird und die Benutzererfahrung verbessert wird. Mithilfe von Shortcodes können diese Animationen einfach in den Inhalt integriert werden. Dies ist besonders nützlich für kleinere Animationen, um die Website aufzupeppen, ohne aufwendige Designs zu benötigen. Mit ein wenig Mühe ist die Einbindung schnell erledigt und kann zu einer erfolgreichen Gestaltung einer ansprechenden Website beitragen!

Für die Bearbeitung von SVG-Grafiken unterstützt uns die Anwendung Boxy SVG (boxy-svg.com):

Details zum Boxy SVG
  1. Intuitive Benutzeroberfläche: "Boxy SVG" zeichnet sich durch eine benutzerfreundliche und intuitive Benutzeroberfläche aus. Die klare Struktur und die leicht verständlichen Werkzeuge ermöglichen eine einfache Bedienung für Anfänger und erfahrene Benutzer.
  2. Vollständige SVG-Unterstützung: Die App bietet umfassende Unterstützung für das SVG-Format (Scalable Vector Graphics). Sie ermöglicht das Erstellen, Bearbeiten und Exportieren von Vektorgrafiken in hoher Qualität.
  3. Code-Ansicht und Bearbeitung: Neben der visuellen Bearbeitung ermöglicht "Boxy SVG" auch die direkte Bearbeitung des SVG-Codes. Dies bietet fortgeschrittenen Benutzern mehr Kontrolle über die Feinheiten ihrer Grafiken.
  4. Integration von Google Fonts: Die App integriert Google Fonts nahtlos, sodass Benutzer auf eine Vielzahl von Schriftarten zugreifen können, um ihre Designs zu verbessern.
  5. Plattformübergreifende Verfügbarkeit: "Boxy SVG" ist plattformübergreifend verfügbar und funktioniert sowohl auf Windows als auch auf macOS und Linux. Dies ermöglicht eine flexible Nutzung auf verschiedenen Betriebssystemen.
  6. Exportmöglichkeiten: Die App bietet vielfältige Exportoptionen, darunter PNG, JPEG und GIF. Dies ist besonders nützlich für die Verwendung von Grafiken in verschiedenen Kontexten und Projekten.
  7. Aktive Community und Updates: "Boxy SVG" verfügt über eine aktive Benutzercommunity und wird regelmäßig aktualisiert. Dies gewährleistet, dass die App mit den neuesten Standards und Funktionen auf dem Gebiet der Vektorgrafiken Schritt hält.

Die umfangreichen Vorteile machen "Boxy SVG" zu einer leistungsstarken Wahl für die Bearbeitung von SVG-Grafiken mit einer breiten Palette an Funktionen und hoher Benutzerfreundlichkeit. Die Standardversion ist in der Regel ausreichend; und wir können die Installation dieser App auf dem Computer befürworten. BOXY SVG

Die Wegerl Artikelreihe mit 🧡

SVG-Animation.
Das Beispiel und die Anleitung

So Smart!

Glückliche Besuche

(1) Das Plug-in zur SVG-Animation

Den Grundlegenden Beschrieb zum folgenden Plug-ins zur Einbindung von SVG-Animationen findet man hier:

https://jackiedelia.com/blog/using-svg-animation-wordpress/

Using SVG Animation in WordPress

Die Einbindung von SVG-Animationen in WordPress-Inhalte ist dank des Plug-ins von Jackie D’Elia nun einfacher denn je. Das Plug-in kann direkt von GitHub heruntergeladen werden. Hier ist der Link zum Download des Plug-ins:

'Code' anklicken und 'ZIP herunterladen'
  1. Dort auf GitHub rechts oben "Code" anklicken,
  2. 'ZIP-Archiv herunterladen' und
  3. öffne bitte das WP-Dashboard und gehe zu Plugins > Installieren > "Plugin hochladen". Lade die ZIP-Datei hoch und klicke auf "Installieren". Sobald die Installation abgeschlossen ist, aktiviere das Plugin. Das Plugin ist nun einsatzbereit und so sind bald SVG-Animationen in deine WordPress-Inhalte einzubinden.

    Dashboard → Plugins → Installieren

Ein guter Tipp für dich ist, dich an den Anweisungen in der README.md-Datei des Plugins zu orientieren. Wenn du diesen Schritten folgst, sollte dann die Einbindung von SVG-Animationen problemlos klappen:

Die README.md

# [JDD SVG Support Plugin](https://jackiedelia.com/)

[JDD SVG Support Plugin](https://github.com/jdelia/jdd-svg-support) ist ein einfaches Plugin, das SVG-Code über einen Shortcode in Ihren WordPress-Inhalt einbettet, sodass Sie ihn mit CSS gestalten und/oder animieren können.

##BETA VERSION

## Erste Schritte

Um mit diesem Plugin zu beginnen, wählen Sie eine der folgenden Optionen, um loszulegen:

* [Laden Sie die neueste Version auf Github herunter](https://github.com/jdelia/jdd-svg-support)

* Klonen Sie das Repo: 'git clone https://github.com/jdelia/jdd-svg-support.git'

* Fork the repo

## Warum ich dieses Plugin geschrieben habe

Für Details darüber, warum ich dieses Plugin geschrieben habe, lesen Sie meinen Beitrag:

[SVG-Animation in WordPress verwenden](https://jackiedelia.com/using-svg-animation-wordpress/)

## Wie man es benutzt

Lade deine SVG-Datei(en) in den Ordner 'images' des Child-Themes hoch. Wenn du dort noch keinen Bilder-Ordner hast, erstelle einfach einen und kopiere die Dateien in diesen Ordner. Der Shortcode hat 3 Attribute: den Dateinamen, die Klasse (optional) und den Pfad zum Ordner (optional).

Verwenden Sie den Shortcode in Ihrem Inhalt:

Format:

[insert-svg-code file="Name der Datei ohne Erweiterung" class="classname"]

Das einzige erforderliche Attribut ist der Dateiname.

Wenn du kein class=""-Attribut angibst, wird die Standardklasse inline-svg zu einem <div>-Tag hinzugefügt. Du kannst bei Bedarf mehr als eine Klasse hinzufügen.

Wenn du keinen Pfad angeben, wird der Standardordner verwendet, nämlich der Ordner images im Stammverzeichnis des Child-Themas.

Beispiel:

[insert-svg-code file="svg-logo" class="logo svg-file"]

Du kannst den Filter von Shortcode_atts _ {$ Shortcode} verwenden, um die Standardeinstellungen programmatisch zu ändern.

Example:
add_filter( 'shortcode_atts_insert-svg-code', 'update_svg_defaults', 10, 4);
function update_svg_defaults( $merge_attributes, $defaults, $attributes, $shortcode ) {
$defaults[['path']] = ' << insert your absolute path to folder with trailing slash >> ';
$merge_attributes = array_merge( $defaults, $attributes );
return $merge_attributes;
}

## Bugs und Probleme

Hast du einen Fehler oder ein Problem mit diesem Plugin? [Eröffnen Sie ein neues Problem] (https://github.com/jdelia/jdd-svg-support) hier auf GitHub.

## Schöpfer

Dieses Plugin wurde von [Jackie D’Elia](https://jackiedelia.com) erstellt.

* https://twitter.com/jdelia

* https://github.com/jdelia

## Copyright und Lizenz

Copyright 2016 Jackie D’Elia. Code veröffentlicht unter der [GPLv2](https://github.com/jdelia/jdd-svg-support/blob/master/LICENSE) Lizenz.

Übersetzt mit www.DeepL.com/Translator (kostenlose Version)

Es bietet Vorteile, wenn bereits ein Child-Theme vorhanden ist, da im Child-Theme nur der Ordner "image" erstellt werden kann. Mithilfe von FTP können die SVG-Dateien, die für die Animation vorgesehen sind, in diesen Ordner geladen werden – so ist das Plugin programmiert. Befolge einfach diese Schritte und du solltest in der Lage sein, SVG-Animationen in WordPress einzubinden.

Beispiel von Shortcode:

[insert-svg-code file="Name der SVG-Datei" class="svg-elem-1"]

Ein Beispiel für den Shortcode lautet: file="Name der SVG-Datei". Das SVG-Bild, das sich im image-Ordner des Child-Themes befindet, wird durch diesen Shortcode referenziert. Die class="svg-elem-1" bezieht sich auf das CSS, das die Animation betreffen soll. Beachte diese Hinweise und du kannst problemlos SVG-Animationen in WordPress integrieren.

(2) Die SVG-Sequenz und das CSS zur Animation

Sobald das SVG-Bild bspw. in Boxy SVG erstellt wurde, ist die Website SVG ARTISTA relevant. Folge einfach diesem

  1. Lade das SVG-Bild auf das Online-Tool SVG ARTISTA hoch.
  2. Wähle den Animationstyp auf 'Animation' und konfiguriere die anderen Einstellungen nach Bedarf.

    SVG-Animation
    Animationstyp auf 'Animation' einstellen.
  3. Klicke dann auf den Button “</>GET CODE” in der Headerleiste, um den Code zu erhalten. Kopiere den CSS-Code und füge ihn im Customizer oder im Childs-Theme ein, wie ich es hier zeige.

    Headerleiste, 'Code erhalten'.

Beispiel der Animation "Glückliche Besuche"  w. o.:

/****** Animation "Glückliche Besuche"
* Generated by SVG Artista
* MIT license (https://opensource.org/licenses/MIT)
* Web https://svgartista.net
******/

@-webkit-keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 319.5417785644531px;
    stroke-dasharray: 319.5417785644531px;
  }

  100% {
    stroke-dashoffset: 639.0835571289062px;
    stroke-dasharray: 319.5417785644531px;
  }
}

@keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 319.5417785644531px;
    stroke-dasharray: 319.5417785644531px;
  }

  100% {
    stroke-dashoffset: 639.0835571289062px;
    stroke-dasharray: 319.5417785644531px;
  }
}

.svg-elem-1 {
  -webkit-animation: animate-svg-stroke-1 2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0s both;
          animation: animate-svg-stroke-1 2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1s both;
}

/*Extra Class: für größe und zentriert*/
.svg-size {
width: 375px;
height: 375px;
margin: 5% auto -35%;
}

Beispiel von Shortcode:

Shortcode mit der Class svg-elem-1 und der Extra Class svg-size:

[insert-svg-code file="Name der SVG-Datei" class="svg-elem-1 svg-size"]
Snippets functions.php, CSS und JavaScript: das Child-Theme. Spezifisch, CSS+JS: das Plug-in Header Footer Code Manager. Zum Workflow und Browser Cache siehe das Plug-in reBusted!

(3) Die SVG-Animation im Sichtbereich laden

Um die SVG-Animation erst im Sichtbereich zu laden, ist etwas JavaScript erforderlich. Dies ist nicht ganz einfach, aber machbar.  Folge den Schritten sorgfältig und du solltest in der Lage sein, die SVG-Animationen nur im Sichtbereich zu laden.

(function ($) {

    $(function() {

        var scrollSvgClass = '.svg-onscroll'; // in eine beliebige css klasse ämndern, aber den . nicht vergessen
        var onlyOnce = true; // false, wenn das SVG immer neu geladen werden soll, wenn es im sichtbereich ist

        // Prüft ob ein Element im Sichtbereich ist
        $.fn.isVisible = function (offset = 0) {
            if (!$(this).length) {
                return true;
            }

            var elementTop = $(this).offset().top + offset;
            var elementBottom = elementTop + $(this).outerHeight();
            var viewportTop = $(window).scrollTop();
            var viewportBottom = viewportTop + $(window).height();
            return elementBottom > viewportTop && elementTop < viewportBottom;
        };

        // Wandelt etwas in XML um, damit man es neuladen kann
        $.fn.xml = function() {
            return (new XMLSerializer()).serializeToString(this[0]);
        };
        
        // Lädt den Inhalt neu, indem es erst in xml umwandelt und dann das xml ersetzt
        $.fn.DOMRefresh = function() {
            return $($(this.xml()).replaceAll(this));
        };

        // Durchläuft alle '.svg-onscroll', prüft ob sie im Sichtbereich sind und lädt sie neu.
        $(scrollSvgClass).each(function() {
            var element = $(this);
            var loaded = false;

            if (element.isVisible() && loaded === false) {
                element.DOMRefresh();
                loaded = onlyOnce; // nur einmal aktualisieren
            }

            $(window).on('scroll', function () {
                if (element.isVisible() && loaded === false) {
                    element.DOMRefresh();
                    loaded = onlyOnce; // nur einmal aktualisieren
                }
            });
        });

        // Ermöglicht es einem Link mit der CSS-Klasse svg-refresh-trigger
        // alle SVGs neuzuladen, wenn sie im Sichtbereich sind (ohne Scroll)
        $(document).on('click', '.svg-refresh-trigger', function (e) {
            e.preventDefault();

            $(scrollSvgClass).each(function() {
                var element = $(this);
                var loaded = false;
    
                if (element.isVisible() && loaded === false) {
                    element.DOMRefresh();
                    loaded = onlyOnce; // nur einmal aktualisieren
                }
            });
        });
    });

})(jQuery);

Pr. WP-Freund

  • Im Shortcode ist dann die Klasse svg-onscroll mit anzugeben. So wird das SVG neu geladen, wenn es im Sichtbereich ist.

Beispiel von Shortcode:

Shortcode wie gehabt und der Class svg-onscroll weiter der Option von svg-refresh-trigger.

[insert-svg-code file="Name der SVG-Datei" class="svg-elem-1 svg-size svg-onscroll svg-refresh-trigger"]

Die Animation über Button neu laden

Einem Button oder Link kann man die Klasse svg-refresh-trigger mitgeben. So wird im Anklicke des SVGs alles was im Sichtbereich ist noch einmal geladen, also ohne die Seite neu zuladen.

Beispiel

Mit Button:

<p style="margin-top: 25px; text-align: center;"><button class="svg-refresh-trigger">Animation neu laden</button></p>

… oder in Link die class:

<a class="svg-refresh-trigger">Animation neu laden</a>

SVG-Animation mit 3 Elementen

Die Erstellung einer SVG-Animation mit drei Elementen erfordert zusätzigen Aufwand, da jedes einzelne Element nacheinander aufgerufen werden sollte.

  • Zum Hinzufügen des SVG-Bildes oder Codes von 'SVG ARTISTA' kopiere diesen zunächst. Füge dann die vollständige Kopie von 'SVG ARTISTA' an der entsprechenden Stelle ein.

Das links mit drei Elementen wirkt wie von Hand gezeichnet und hier rechts ist das die einfache Animation.

 

Des Beispiels der SVG-Code:

Auf 'SVG ARTISTA' ist der Einstellung darauf zu achten:

  • Der element class eigenen Namen zuweisen,
  • animation type: Animation und für solches SVG
  • der Staffelschritt (stagger step) höher ist als die Animationsdauer (animation duration).
Der wenigen Einstellungen auf SVG ARTISTA ist acht zu geben.

Nochmals, nach den Einstellungen ist wieder über den Button in der Headerleiste der SVG-CODE zu kopieren und bspw. in 'Boxy SVG' einzufügen. Also die SVG-Kopie von 'SVG ARTISTA' im gesamten dort eintragen und abspeichern.

Der von SVG ARTISTA generierte Code ist hier im Boxy SVG eingefügt. Somit ist das SVG welches oberhalb ist zu entfernen …

Siehe auch unterhalb in Elements. Der hier grau hinterlegt Bereich ist der neue SVG-Code von 'SVG ARTISTA'. Das welches der path von oberhalb ist somit zu löschen. Oder den kopierten SVG-Code gleich in eine neue Datei eintragen.

Bspw. folgendes der Änderung: Die Classen wie class="svg-pfeil-1"sind von 'SVG ARTISTA' generiert.

Details
Teil von SVG-Codes wie in 'Boxy SVG' erstellt:

<path d="M 48.819 142.459 C 143.701 165.676 247.787 163.746 338.819 60.306" style="stroke: rgb(253, 123, 13); stroke-linecap: round; stroke-width: 18px; fill: none;"></path>
<path d="M 347.374 46.431 L 275.31 67.57" style="stroke: rgb(253, 123, 13); stroke-linecap: round; stroke-width: 18px; fill: none;" transform="matrix(0.999391, 0.0349, -0.0349, 0.999391, 2.178984, -10.831111)"></path>
<path d="M 347.563 47.873 L 339.442 119.982" style="stroke: rgb(253, 123, 13); stroke-linecap: round; stroke-width: 18px; fill: none;" transform="matrix(0.999391, 0.0349, -0.0349, 0.999391, 3.138328, -11.937108)"></path>

Teil von SVG-Code nach 'SVG ARTISTA':

<path d="M 48.819 142.459 C 143.701 165.676 247.787 163.746 338.819 60.306" style="stroke: rgb(253, 123, 13); stroke-linecap: round; stroke-width: 18px; fill: none;" class="svg-pfeil-1"></path>
<path d="M 347.374 46.431 L 275.31 67.57" style="stroke: rgb(253, 123, 13); stroke-linecap: round; stroke-width: 18px; fill: none;" transform="matrix(0.999391, 0.0349, -0.0349, 0.999391, 2.178984, -10.831111)" class="svg-pfeil-2"></path>
<path d="M 347.563 47.873 L 339.442 119.982" style="stroke: rgb(253, 123, 13); stroke-linecap: round; stroke-width: 18px; fill: none;" transform="matrix(0.999391, 0.0349, -0.0349, 0.999391, 3.138328, -11.937108)" class="svg-pfeil-3"></path>

Anmerkung: Die Classen wären auch direkt in 'Boxy SVG' einfügbar, aber gegen Fehler ist man mit der direkten Kopie gewappnet.

Des Beispiels das CSS für die SVG-Animation:

Das wär dann für nur eine Animation auf der Website in Kopie wie gehabt im Customizer oder Child-Themes einzutragen.

Wenn der Website des mehr von Animationen in Anwendung sind, dann ist der nächst Animation die Kopie nachzuarbeiten.

Erstens:

  • die @-webkit-keyframes animate-svg-stroke-1 und @keyframes animate-svg-stroke-1 sind
  • in @-webkit-keyframes pfeil-animate-svg-stroke-1 und @keyframes pfeil-animate-svg-stroke-1 zu editieren.

Dasselbe sind dem Animationscode allen @-webkit-keyframes und @keyframes zu editieren. In diesem Beispiel des Pfeils sind das nur der dreien Paare.

Zweitens:

  • Der Selektoren wie .svg-pfeil-1 {
    -webkit-animation: pfeil-animate-svg-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
    animation: pfeil-animate-svg-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
    }sind die Deklarationen anzupassen.

Selbstredend allen hier drei Selektoren den Deklarationen gleich.

Das CSS für die SVG-Animation mit dem Pfeil

Von wegen wurden von mir die Attriputwerte bis auf zwei Kommastellen reduziert.

/****** Animation "Pfeil"
* Generated by SVG Artista
* MIT license (https://opensource.org/licenses/MIT)
* Web https://svgartista.net
******/
@-webkit-keyframes pfeil-animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 321.55px;
    stroke-dasharray: 321.55px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 321.55px;
  }
}

@keyframes pfeil-animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 321.55px;
    stroke-dasharray: 321.55px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 321.55px;
  }
}

.svg-pfeil-1 {
  -webkit-animation: pfeil-animate-svg-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
          animation: pfeil-animate-svg-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
}

@-webkit-keyframes pfeil-animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 77.10px;
    stroke-dasharray: 77.10px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 77.10px;
  }
}

@keyframes pfeil-animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 77.10px;
    stroke-dasharray: 77.10px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 77.10px;
  }
}

.svg-pfeil-2 {
  -webkit-animation: pfeil-animate-svg-stroke-2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.12s both;
          animation: pfeil-animate-svg-stroke-2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.12s both;
}

@-webkit-keyframes pfeil-animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 74.56px;
    stroke-dasharray: 74.56px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 74.56px;
  }
}

@keyframes pfeil-animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 74.56px;
    stroke-dasharray: 74.56px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 74.56px;
  }
}

.svg-pfeil-3 {
  -webkit-animation: pfeil-animate-svg-stroke-3 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.24s both;
          animation: pfeil-animate-svg-stroke-3 1s cubic-bezier(0.47, 0, 0.745, 0.715) 3.24s both;
		  }

In Fortsetzung siehe:

Mit Danksagung an WP-Freund für den Code "Die SVG-Animation im Sichtbereich laden" und Jackie D’Elia für das hervorragende Plug-in.

Der Beitrag wurde mit fachlicher Unterstützung erstellt.


Aktualisiert im Jahr 2024 Oktober

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Ich stimme zu, dass meine Daten auf dieser Website gespeichert und verarbeitet werden. Hier sind die Informationen zu den Datenschutzerklärungen.

  • Bitte beachte, dass vor der Publikation eines Kommentars eine manuelle Freigabe erforderlich ist.