Die Kunst des Geschichtenerzählens könnte lange vor dem Sprechen des Homo Sapiens begonnen haben. Es entwickelt sich mit uns und passt sich den verfügbaren Tools an. Die Geschichten, die von Generation zu Generation erzählt und überliefert wurden, nahmen wortwörtlich die Evolution von handgeschriebenen Büchern zum Massendruck, zur digitalen Textverarbeitung und kürzlich zum Internet auf. Aus der Sicht der menschlichen Evolution fühlt es sich an, als hätten wir nicht das volle Potenzial aller verfügbaren Technologien, die wir heute haben, ausgeschöpft. Während Videos bereits ihre Kampagnen der virtuellen Weltherrschaft gestartet haben, ist der Großteil des Inhalts des Webs noch in Textform.

Moderne Webinhalte sollten interaktiv sein und verschiedene Medien zusammen mit gutem alten Text enthalten. Einige Tools können uns helfen, unser Storytelling um ein paar Punkte zu verbessern. Und wenn Sie ein WordPress-Benutzer sind, können Sie das Animate It! Plugin, um coole CSS3-Animationen zu Ihren Inhalten hinzuzufügen.

Was sind die Möglichkeiten?

Zusammen mit HTML5 ist CSS3 das Akronym für modernes Webdesign. Kurz gesagt ist CSS die Webkomponente, mit der Benutzer das Erscheinungsbild der Webseite wie Layout, Position, Schriftart, Farbe usw. steuern können. Die neueste Version, CSS3, ist so intelligent, dass Benutzer Bilder und Animationen mithilfe von erstellen können Codes.

Glücklicherweise müssen Sie kein Programmierer sein, um CSS3 auf Ihrer WordPress-Website zu verwenden. Das animieren es! Plugin ermöglicht es Ihnen, CSS3-Animationen auf Posts, Widgets und Seiten mit einem Klick auf eine Schaltfläche im Editor anzuwenden. Außerdem können Benutzer die Auslöser steuern. Sie können beispielsweise Animationen auf Bildlauf, Klicken und Hover anwenden und unterschiedliche Bildlaufversetzungen für einzelne Animationsblöcke hinzufügen. Das Plugin enthält auch eine Menge Funktionen wie:

  • 50+ Entry-, Exit- und Attention Seeker-Animationen
  • Bietet eine verzögerte Steuerung von Funktionen und Dauer in der Animation, um eine schöne Animationssequenz zu erstellen
  • Benutzern erlauben, die Animation unbegrenzt oder beliebig oft anzuwenden
  • Option zum Hinzufügen von benutzerdefinierten CSS-Klassen zum einzelnen Animationsblock
  • Optionen zum Aktivieren oder Deaktivieren von Animationen auf Smartphones und Tablets

Was kannst du mit dem Animate It machen? Plugin? Sie können Ihren Artikeln einfache Interaktivität hinzufügen, verlockende Verkaufsseiten erstellen, die Emotionen Ihrer Fiktionen vertiefen oder sogar eine leistungsstarke Geschäftspräsentation erstellen, wenn Sie das möchten. Denken Sie daran, nicht über Bord zu gehen, da das Beschießen Ihres Besuchers mit unbegrenzter Animation nicht der beste Weg ist, loyale Leser zu bekommen.

Erste Schritte mit Animate It!

Nach der Installation und Aktivierung des Plugins finden Sie die Schaltfläche zum Hinzufügen von Animationen in "WordPress 'Editor". Diese Schaltfläche wird nur im visuellen Modus angezeigt, aber wenn Sie die Befehle gelernt haben, ist es möglich, die Codes aus der Klartextmodus (mehr dazu später).

Nach dem Drücken der Taste erhalten Sie ein Optionsfenster. Es gibt drei Registerkarten, in denen Sie die Animation anpassen können. Die erste Registerkarte ist "Eintrag". Hier können Sie die Animation hinzufügen, die unter bestimmten Bedingungen in den Bildschirm eingeblendet wird. Vier Dropdown-Optionen helfen Ihnen, die Animationseffekte anzupassen.

  • Animation ist der Ort, um zu wählen, welche Art von Animation Sie wollen.
  • Mit Delay können Sie die Zeit vor dem Start der Animation anpassen.
  • Die Dauer gibt an, wie lange die Animation von Anfang bis Ende gespielt wird. Je größer die Zahl, desto langsamer wird die Animation.
  • Timing ist der Anteil der Animation, der gleichzeitig gespielt wird. Zum Beispiel wird der "easeIn" -Effekt die Animation am Anfang langsamer und gegen Ende schneller abspielen.

Sie können die Effektkombinationen ausprobieren, indem Sie sie mit der Schaltfläche "Animate It!" Abspielen. Wenn das Ergebnis Ihren Vorstellungen entspricht, können Sie die Schaltfläche "Einfügen" drücken, um sie in Ihren Inhalten zu verwenden.

Der Tab "Exit" ist dem Eintrag mehr oder weniger ähnlich, fügt jedoch eine Animation hinzu, die den Bildschirm verlässt. Indem Sie beide kombinieren, können Sie ein Objekt hinzufügen, das auf dem Bildschirm erscheint und dann verschwindet.

Auf der Registerkarte "Optionen" steuern Sie die allgemeinen Einstellungen der Animation. Hier können Sie festlegen, dass die Animation in einer Schleife oder nur einmal abgespielt wird, den Endzustand des Elements beibehalten, benutzerdefinierten CSS-Code hinzufügen und den Auslöser festlegen, mit dem die Animation gestartet wird. Speziell zum Trigger - die "Animate On" -Einstellung - Sie können beispielsweise Scroll wählen, und die Animation startet nur, wenn der Bereich bereits auf dem Bildschirm sichtbar ist.

Hinzufügen von Inhalten

Nachdem Sie die Schaltfläche "Einfügen" gedrückt haben, sehen Sie einige Zeilen Shortcodes, die Ihrem Inhaltsbereich hinzugefügt wurden. Diese Shortcodes sind diejenigen, die die Animation steuern. Und da es sich nur um Codes mit Werten handelt, könnten Sie die Codes manuell hinzufügen, wenn Sie mit Codes gut umgehen können und wollen. Andere Leute sollten jedoch nur bei Animate It bleiben! Taste.

Sie sehen auch eine Textzeile, die sagt: " Bitte fügen Sie Ihren Inhalt in diesem Bereich hinzu. "Hier können Sie die Objekte hinzufügen, die Sie animieren möchten. Das können Texte, Bilder, Icons, Logos, Audios, Videos oder auch andere Shortcodes sein. Ich habe versucht, einen mit dem Typed Js-Plugin generierten Typ-Shortcode einzufügen, und das Ergebnis ist großartig.

Wenn es eine Sache gibt, die ich über die Verwendung von Animate It sagen könnte! Plugin, wäre es "Experiment!" Spielen Sie damit und versuchen Sie verschiedene Kombinationen, um das gewünschte Ergebnis zu erzielen. Es macht Spaß. Und hier ist das Ergebnis, dass ich in weniger als einer Minute aufkam. Ich habe das Animate It kombiniert! Plugin mit typisiertem Js Plugin.

Denkst du, es ist an der Zeit, deinem Webinhalt interaktive Elemente hinzuzufügen? Planen Sie das Plugin zu testen? Verwenden Sie verschiedene Plugins für die Animation? Bitte teilen Sie mit den Kommentaren unten.