Man kann es als Gimmick bezeichnen, man kann es Augenweide nennen, aber der Parallax-Effekt im Webdesign ist hier, um zu bleiben. Es ist ein Element, das Ihrer Website den "WOW" -Faktor geben wird. Während der Effekt schon seit einiger Zeit besteht und es viele Websites gibt, die es in ihr Design implementiert haben, ist es immer noch cool.

Wenn Sie bereit sind, der Bewegung beizutreten und den Effekt Ihrer WordPress-Seite hinzuzufügen, bleiben Sie dran.

Was ist Parallax?

Für diejenigen, die mit dem Begriff nicht vertraut sind, definiert das Wörterbuch das Wort "Parallaxe" als " den Effekt, bei dem die Position oder Richtung eines Objekts von verschiedenen Positionen aus gesehen unterschiedlich zu sein scheint. "

In der Website-Design-Welt ist Parallax eine Technik, bei der sich Hintergrundbilder mit einer anderen Geschwindigkeit bewegen, normalerweise langsamer als die Vordergrundbilder. Der Zweck besteht darin, eine Tiefenillusion (3D-Effekt) in einer 2D-Umgebung zu erzeugen.

Die Anwendung von Parallax ist seit den 1980er Jahren in der Gaming-Welt bekannt, aber Webdesigner haben den Effekt erst 2011 mit HTML5 und CSS3 weit verbreitet.

Erster Pfad: WordPress Themes

Wenn Sie ein WordPress-Benutzer sind, ist der einfachste Weg, den Parallax-Effekt auf Ihrer Website zu haben, ein WordPress-Theme mit dem eingebauten Effekt zu verwenden. Wechseln Sie das Theme und Sie sind fertig.

Es gibt Tonnen von Parallax-bereiten WP-Themen da draußen, sowohl frei als auch bezahlt. Eine schnelle Suche in Google und im WordPress-Theme-Repository gibt Ihnen mehr Möglichkeiten, die Sie jemals behandeln können.

Wenn Sie einige der Themen testen möchten, finden Sie hier einige Beispiele aus dem Repository. Da es unmöglich ist, alle verfügbaren Parallax-fähigen Themen zu testen und zu vergleichen und Ihnen nur das Beste zu zeigen, wurden diese ausschließlich aufgrund der Subjektivität meines persönlichen visuellen Geschmacks ausgewählt.

1. Parallax-Rahmen

2. Marvy

3. SimpleShift

4. Elegantes

5. Integral

6. Eifer

7. Wacholder

8. Und vergessen Sie nicht das neueste offizielle Thema von WordPress, Twenty Seventeen, unterstützt auch einen Parallax-Header.

Diese Themen haben normalerweise einen oder mehrere spezifische Platzhalter für den Parallax-Effekt, und Sie müssen lediglich das Hintergrundbild an diese Orte hochladen. Aber diese Einfachheit ist auch ein Nachteil, weil Sie wenig Raum zum Improvisieren haben.

Jedes Thema ist anders, aber Sie können das Parallax-Hintergrundbild normalerweise über das Menü "Darstellung -> Anpassen" anpassen und das spezifische Menü entsprechend den Designeinstellungen auswählen.

Zweiter Pfad: WordPress Plugins

Wenn Sie den Effekt auf die Bereiche Ihrer Wahl anwenden möchten, müssen Sie Plugins verwenden. Obwohl die Anzahl nicht so groß ist wie bei den Themes, gibt es noch viele WordPress Parallax Plugins, die Sie ausprobieren können. Hier sind ein paar von ihnen aus dem Plugin-Repository: Parallax Scroll, einfache WordPress Parallax Slider, cbParallax, ML Parallax, MG Parallax Slider, einfache WP Parallax Slider und Aesop Story Engine.

Die meisten dieser Plugins ermöglichen es Ihnen, Parallaxenelemente zu erstellen und diese in Posts, Pages oder andere unterstützte Bereiche mit Hilfe von Shortcodes einzufügen. Es gibt auch einige, die die Elemente direkt an der Stelle erzeugen, an der die Parallaxe erscheinen soll.

Da wir die Aesop Story Engine, ihre Parallaxen-Einfügefähigkeit und all ihre Funktionen im Interactive Longform Storytelling-Inhalt von WordPress Ebook besprochen haben, wollen wir uns zum Zweck dieses Artikels ein anderes Plugin als Beispiel ansehen.

In Parallax Scroll können Sie beispielsweise eine neue Parallaxe erstellen, die der Erstellung eines neuen Posts ähnelt. Die Bearbeitungsoberfläche sieht auch ähnlich aus. Um das Parallax-Hintergrundbild hinzuzufügen, verwenden Sie die Option "Vordefiniertes Bild festlegen". Titel und Post-Inhalt sind optional.

Es gibt viele Optionen, mit denen Sie unter der Inhaltsbox basteln können, aber sie sind auch optional.

Nachdem Sie auf die Schaltfläche "Veröffentlichen" geklickt haben, erhalten Sie einen Shortcode. Fügen Sie diesen Shortcode an einem beliebigen unterstützten Ort (Posts, Seiten, Widgets usw.) ein und Sie erhalten den Parallax-Effekt.

Beachten Sie, dass selbst wenn Sie viele Optionen in den Optionen anpassen können, das Endergebnis der Parallaxe stark von den Themen abhängt, die Sie verwenden. Wenn das Design die volle Breite unterstützt, kann das Parallax-Element in seiner vollen Breite erscheinen. Wenn nicht, können Sie akzeptieren, was das Leben Ihnen mit offenen Armen gegeben hat, oder Sie könnten versuchen, sich mit CSS und JavaScript in Ihre bevorzugte Erscheinung zu hacken.

Ein kleiner Trick, den du deinem Arsenal hinzufügen kannst: Niemand hat gesagt, dass du das Theme und das Plugin nicht kombinieren kannst. Es ist auch legal, mehr als ein Plugin zu verwenden. Sie könnten zum Beispiel Twenty Seventeen für Ihr Thema verwenden und Aesop Story Engine plus Parallax Scroll als zusätzliche Würze für Ihr Webrezept installieren.

Jetzt können Sie eine Parallaxereise unternehmen und Ihre Besucher auf dem Weg begeistern.