Animationen machen die Sache lebendig

Animationen sind das Salz in der Suppe


Kaum ist der Gutenberg Editor da überschlagen sich die Ereignisse. Wie aus dem Nichts kommen neue Features (Blöcke), welche seine Webseite so richtig pushen.

 Ich war jahrelang ein Anhänger des multipurpose Themes „Divi“ und konnte mit dem Gutenberg Editor so gar nichts anfangen. Erst jetzt habe ich begriffen, was Automatic plant. Das ist ja eine richtige Revolution was die da machen. Eigentlich braucht man jetzt gar keine „Page-Builder“ mehr. Also Ade „Divi“ und „Bakery“ ,“Jimbdo“, „Wixx“ und wie so alle heissen. 

Mit Gutenberg habe ich einen leistungsfähigen „Page-Builder“ welcher zusehends besser wird.  Was vor einem halben Jahr noch sehr spartanisch daher kam hat sich jetzt zu einem allumfassenden Theme-Builder entwickelt.

Gutenberg Animationen

Die Animations-Plugins

Ich habe zwei Blogs gefunden, womit Animationen dargestellt werden können.

Block Animation

Die eine ist „Block-Animation“.

Blocks Animation ermöglicht es Dir, CSS-Animationen auf eleganteste Weise zu all Ihren Gutenberg-Blöcken hinzuzufügen.

Die Benutzeroberfläche für Blocks Animation fühlt sich so nativ und intuitiv an, dass Sie nicht einmal merken, dass sie installiert ist. Installieren Sie einfach, und Sie sehen die Animationseinstellungen in allen Blöcken direkt in der Seitenleiste Blockeinstellungen.

Die Animationen, welche ich verwenden werde ist 

Animated Blogs

EIGENSCHAFTEN
Wählen Sie aus 76 browserübergreifenden CSS3-Animationen oder fügen Sie Ihre eigenen hinzu
Vorschau von Animationen im Editor
Passen Sie die Animationsverzögerung, den Bildlaufschwellenwert und die Sichtbarkeit von Blöcken an
Basierend auf der InnerBlocks-Komponente von Gutenberg
DIE EINSTELLUNGEN
Verzögerung: Wie viele Millisekunden müssen gewartet werden, bevor das Element animiert wird.
Schwellenwert: Animation hinzufügen, wenn x% des Elements den Bildschirm betreten.
Zuerst ausblenden: Setzen Sie das Element auf Deckkraft 0, wenn die Seite geladen wird. Die Option funktioniert für Elemente, die durch CSS zu 100% Deckkraft übergehen.
Der Klassenname „ab-end“ wird nach Abschluss einer CSS-Animation automatisch zu Elementen hinzugefügt. Dies kann für zusätzliche Anpassungen verwendet werden.

Funktionsweise von Animated Blogs

Danach einfach das Element einfügen, welches animiert werden soll.

Ich muss zugeben, dass es etwas kniffelig ist, den Animationsblock zu finden. Man muss relativ weit nach oben hovern und warten, bis die Information „Animated-Block Animation“ erscheint. Die Blockinfos „Animated-Block-Bild“ und Animated-Block-Spalten“ helfen nicht, wenn man Animationen erstellen will.

Unter den Blogs-Layout wählt man zuerst den Animated Blog aus und fügt ihn ein. Man kann die erstellte Animation betrachten, wenn man die Seite neu ladt. Also F5-Taste drücken.

Hat man den richtigen Block gefunden können bis zu 45 verschiedene Animationen ausgewählt werden

Zoom in

slide right

Jack in the Box

Kommentar verfassen

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

Scroll to Top