SVG-Animation in WordPress. – so funktioniert’s

Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
"Classic und TinyMCE – ist so klasse!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit TinyMCE Advanced
"Classic und TinyMCE – ist das ausgezeichnete!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
"Classic und TinyMCE – ist so sehr gut !"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
"Classic und TinyMCE – und tut sehr gut!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

TinyMCE aktive Installationen: 2+ Millionen
"Classic und TinyMCE – ist so fabelhaft!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
"Classic und TinyMCE – ist de luxe!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
"Classic Widgets – sind so grandiose!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Classic und TinyMCE – ist so fein!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Die SVG-Animation in WordPress-Inhalten. Das ist dank der Website 'SVG ARTISTA' und eines minimalistischen Plug-ins von Jackie D’Elia keine Zauberei. Von WP-Freund ist dann noch etwas JavaScript dabei, um die Animation erst im Viewport zu laden. Inhalts funktioniert das dann mit Shortcode. In paar Schritten ist das erledigt – viel Erfolg! – für so Designs kleinere Animation geeignet. Genauso wie es für den Designer meist ausreicht, um die Website aufzupeppen.

SVG-Animation, das Beispiel

Glückliche Besuche

Das Plug-in zur SVG-Animation

Der Ausgangspunkt siehe Verwenden von SVG-Animation in WordPress.

  1. Das Plug-in ist hier https://github.com/jdelia/jdd-svg-support

    'Code' anklicken und 'ZIP herunterladen'
  2. Dort der Website 'Code' anklicken,
  3. 'ZIP herunterladen' und
  4. die ZIP-Datei über Dashboard → Plugins → Installieren in das WordPress Plug-in-Verzeichnis laden und aktivieren.

    Dashboard → Plugins → Installieren
  • Dem Beschrieb der Datei README.md ist zu folgen und das Animieren von SVG funktioniert.

Dem Beschrieb nach ist von Vorteil, wenn schon ein Childs-Theme besteht. So ist dort im Childs-Theme nur noch der Ordner "image" zu erstellen. In diesen Ordner sind dann per FTP die SVGs zu laden, welche zur Animation vorgesehen. – so ist das Plug-in programmiert.

Beispiel von Shortcode

file="Name der SVG-Datei" versteht sich als das SVG-Bild, welches Childs-Theme im image-Ordner ist und die class="svg-elem-1"bezieht sich folgend auf das CSS, welches die Animation betrifft.

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

Das CSS zur SVG-Animation

  1. Nachdem das SVG bspw. in 'Boxy SVG' erstellt wurde.
  2. Das SVG-Bild auf die Website https://svgartista.net/ hochladen.
  3. So wie ich das hier zeige, ist den Einstellungen der Animationstyp auf 'Animation' einzustellen. Der anderen Einstellungen sind individuell.

    SVG-Animation
    Animationstyp auf 'Animation' einstellen.
  4. Danach ist über die Headerleiste der Code zu erhalten bzw. der Button “</>GET CODE". Nach Anklicke dann nur den CSS-Code kopieren und im Customizer oder Childs-Theme eintragen.

    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"]

Die Snippets zur functions.php ab ins Plug-in Code Snippets.
Mit Obhut der Codes! – so bleibt das auch nach Theme-Update.
Oder Childs Theme! – zum Beitrag Quick Child Theme Generator.
So zum Workflow und Browser Cache s. das Plug-in reBusted!

Die SVG-Animation im Sichtbereich laden

Das ist nicht ganz so einfach und mit JavaScript.

(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 die Klasse svg-onscroll mit angeben. 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 geben. Im Anklicke, wird alles im Sichtbereich noch einmal geladen, 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

Das ist aufwendiger, denn die einzelnen Elemente sind eins nach dem anderen aufzurufen. Und da ist dann auf 'SVG ARTISTA' auch das SVG-Bild bzw. der SVG-Code zu kopieren. Beispiels mit 'Boxy SVG' siehe unterhalb in Elements, dort ist das einzukopieren. Also die Kopie von 'SVG ARTISTA' im gesamten dort eintragen.

Das links wirkt wie von Hand gezeichnet und hier rechts ist das nur willkürliche 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).

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.

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 Childs-Theme 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

/****** 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.5533447265625px;
    stroke-dasharray: 321.5533447265625px;
  }

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

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

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

.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.10044860839844px;
    stroke-dasharray: 77.10044860839844px;
  }

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

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

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

.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.56484985351562px;
    stroke-dasharray: 74.56484985351562px;
  }

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

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

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

.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:

SVG-Text von Zauberhand! – die Animation mit Strichen


Mit Danksagung an WP-Freund und Jackie D’Elia https://codepen.io/jdelia/pen/KMmvJw

Schreibe einen Kommentar

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