So fügen Sie Ihrem WordPress-Design angezeigte Animationen hinzu

Nun, animierte Websites fangen die Konzentration der Benutzer ein. (Zumindest meine definitiv.) Ich bin besonders ein Blog-Autor, aber wenn ich eine Website sehe, auf der einige Animationen erscheinen oder schweben, fällt mir das mit Sicherheit auf.

Wenn Sie Ihrem WordPress-Theme Animationen hinzufügen möchten, können Sie dies ganz einfach tun.

Was wirst du brauchen?

  1. cPanel-Zugriff
  2. Grundlegende HTML- und CSS-Kenntnisse
  3. Verständnis der wichtigsten WordPress-Dateien

Zunächst sollten wir also das CSS-Repository in das Thema einladen. Hierfür gibt es zwei Methoden.

  1. Bearbeiten der functions.php
  2. Hinzufügen von benutzerdefiniertem CSS zu WordPress

Machen wir es mit der zweiten Methode, da es etwas einfacher ist als die erste.

wie man Animationen in WordPress-Theme hinzufügt

WP Benutzerdefiniertes CSS hinzufügen ist ein KOSTENLOSES Plugin für WordPress und Sie können mit diesem Plugin Ihr persönliches benutzerdefiniertes CSS zu Ihrem Thema hinzufügen. Der Vorteil der Verwendung dieses Plugins ist: "Sie werden das CSS beim Aktualisieren der Themendateien nicht verlieren."

Step1. Laden Sie das Plugin herunter, installieren Sie und Mehr erfahren

Step2. Laden Sie die Animate.css von GitHub und fügen Sie es in Sitewide CSS
wp benutzerdefinierte CSS hinzufügenWordPress CSS animieren CSS animieren

Step3. Gehen Sie nun zu Darstellung >> Editor

Step4. Öffnen Sie header.php

Hinweis: Es hängt ganz von der Bildung Ihres Themas ab, wie Sie bestimmte Themendateien bearbeiten.

Step5. Zum Beispiel möchte ich die primäre Navigation animieren. Ich werde das Recht erhalten und fügen Sie die Stilklasse hinzu.

Step6. Jetzt benötigen Sie eine Liste wahrscheinlicher Animationen, die Sie hinzufügen können.

Hier ist die Liste derselben

  • prallen
  • Blitz
  • Puls
  • Gummiband
  • schütteln
  • Kopfschütteln
  • schwingen
  • Tada
  • flattern
  • Gelee
  • abprallenIn
  • BounceInDown
  • BounceInLeft
  • BounceInRight
  • BounceInUp
  • abprallen
  • BounceOutDown
  • BounceOutLeft
  • BounceOutRight
  • BounceOutUp
  • einblenden
  • FadeInDown
  • FadeInDownBig
  • FadeInLeft
  • FadeInLeftBig
  • FadeInRight
  • FadeInRightBig
  • FadeInUp
  • FadeInUpBig
  • fadeOut
  • FadeOutDown
  • FadeOutDownBig
  • FadeOutLeft
  • fadeOutLeftBig
  • FadeOutRight
  • FadeOutRightBig
  • FadeOutUp
  • fadeOutUpBig
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY
  • lightSpeedIn
  • lightSpeedOut
  • drehenIn
  • rotiereInDownLeft
  • rotierenInDownRight
  • rotierenInUpLeft
  • rotierenInUpRight
  • drehenOut
  • RotateOutDownLeft
  • RotateOutDownRight
  • RotateOutUpLeft
  • rotiereOutUpRight
  • Scharnier
  • rollIn
  • ausrollen
  • hineinzoomen
  • zoomInDown
  • zoomInLinks
  • zoomInRight
  • zoomInUp
  • Rauszoomen
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp
  • slideInDown
  • slideInLeft
  • slideInRight
  • slideInUp
  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • slideOutUp

Jetzt haben Sie eine Liste von Animationen, die Sie Ihrem Blog-Thema hinzufügen können.

Themenanimationen

Step7. Geben Sie "animiert" gefolgt von der Animation ein, die Sie dem Abschnitt hinzufügen möchten.

Sample

<div id=”primary-navigation” class=”primary navigation animierte flattern”>

Step8. Stellen Sie sicher, dass Sie den Code nur in der Klasseneigenschaft anhängen. Das Einfügen von Animationscode in das ID-Attribut funktioniert überhaupt nicht.

Step9. Speichern Sie die Themendatei.

Step10. Fügen Sie den erforderlichen Dateien Animationen hinzu, wo immer Sie Animationen anhängen möchten. Für Animationen einzelner Cover müssen Sie möglicherweise single.php bearbeiten.

Step11. Experimentieren Sie es live auf Ihrer Website.

Grüß dich, du hast es geschafft.

Schauen wir uns einige Origami-Hacks an, um diese Animationen auf Ihrer Website voranzutreiben.

  1. Sie können eine fortlaufende Loop-Animation anhängen, indem Sie zwischen "animiert" und "wackeln" "unendlich" hinzufügen.
    so was:

  2. Diese Animationen werden beim Laden der Seite ausgelöst.
  3. Infolgedessen nur die Animationen oberhalb der Falte würde gesehen werden.
  4. Um beim Scrollen der Seite Animationen auszulösen, müssen Sie diese implementieren wow.js in Ihre Themendateien. (Sie können entweder lesen, wie Sie beim Scrollen animate.css auslösen, oder täglich besuchen.)

Final Words

Ich möchte dazu beitragen und Ihnen helfen, Ihre Themenanimationen freundlich zu gestalten. Lassen Sie mich wissen, ob Sie Animationen in Ihrem Thema über das Kommentarformular oder das Kontaktformular wünschen.