Animierte Hintergründe mit dem Parallax Background Builder und Javascript

Kein Beitragsbild

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren...

Der Parallax Background Builder (PBB) aus dem Hause Web-Features ist ein Wysiwyg-Editor für animierte Hintergründe. Mit seiner Hilfe lassen sich wirklich schnell und einfach Hintergrundanimationen erstellen, die mit dem sog. Parallax-Effekt ausgestattet sind. PBB kann Animationen für einzelne Div-Container, aber auch Animationen für den kompletten Website-Background erzeugen. Die Verwendung ist kostenlos.

Parallax Background Builder: Fast intuitive Bedienung sorgt für schnelle Erfolge

Unter Parallax Scrolling versteht man einen 2D-Effekt, der eine räumliche Tiefe in ein Bild dadurch bringt, dass er Bilder auf verschiedenen Ebene platziert. Dabei bewegen sich die im Vordergrund liegenden Bilder schneller als die weiter in den Hintergrund platzierten. So wird das Auge getäuscht. Der Effekt zählt zu den ältesten und simpelsten Animationstechniken überhaupt. Ich kann mich noch an Produkte der Augsburger Puppenkiste erinnern, etwa Jim Knopf, die genauso angelegt waren, wobei die einzelnen Elemente auf Pappstreifen geklebt und mit der Hand bewegt wurden.

Da ist der Parallax Background Builder sehr viel moderner. Er erzeugt seine Ergebnisse weitaus schneller und ganz ohne Papier und Schere…

Am Ende des Erstellungsprozesses liefert PBB einen Javascript-Codeschnipsel, der die zuvor zusammengeklickte Animation beinhaltet und steuert. Hierzu ist die Einbindung der PBB Api erforderlich. Der Aufruf ist im Codeschnipsel, der wie gewohnt in den Head einkopiert werden muss, bereits enthalten.

Der Weg zur fertigen Animation ist zu Beginn nicht selbsterklärend. Allerdings liefern die Betreiber eine komplett durchdokumentierte Einsteigeranleitung mit. Anhand dieser Doku ist die erste Hintergrundanimation eine Sache von fünf Minuten. Gleichzeitig erschließen sich bei dieser Gelegenheit die Konfigurationsoptionen wie von selbst. Sechs vorgefertigte Beispiele, etwa dieser kitschig-romantische Sonnenuntergang, wissen zu inspirieren.

PBB bringt eine kleine Bildergalerie frei nutzbarer Grafikelemente mit, die teilweise auf allen Achsen wiederholend eingesetzt werden können, teilweise aber auch nur horizontal dupliziert einen sinnvollen Nutzen spenden. Neben den eher zu Lernzwecken nützlichen Elementen der Galerie kann jedes beliebige per URL verfügbare Bild zur Verwendung gelangen. Der Upload muss zu diesem Zeitpunkt logischerweise bereits erledigt sein, ein Imagehosting bietet PBB nicht.

E-Book Effektives Online Marketing von Andreas Hecht

E-Book: Effektives Online Marketing

Entdecke die Power des perfekten Online-Marketings für deine Website. Du erfährst neue Techniken, die deine Website automatisch besser ranken lassen und die dir nach und nach einen Expertenstatus verleihen werden. [...]

Parallax Background Builder: Die einzelnen Schritte im Überblick

Die einzelnen Grafikelemente werden auf einzelne Ebenen gelegt. So lassen sie sich einzeln animieren. Zwar könnte eine gemeinsame Animation mehrerer Elemente auf einer Ebene auch schon einmal Anwendungsfall sein, jedoch ist diese Möglichkeit mit PBB nicht gegeben. Hier erhält jedes Element eine eigenen Ebene.

Mit dem Erstellen einer neuen Ebene muss entweder eine Bild-URL spezifiziert oder ein Element aus der Bildergalerie gewählt werden. Danach werden die Konfigurationsmöglichkeiten frei. So ist ein Bild stets entweder Muster (Pattern) oder Bild (Image). Definiert man es als Muster, legt man noch fest, ob es auf der X-, der Y-Achse oder beiden Achsen wiederholt werden soll. ZUdem gibt man optional einen Offset in Pixeln an oder legt das Element an den unteren Bildrand (Snap to bottom). Hat man sich für die Option Bild (Image) entschieden, lässt sich das dann nicht mehr wiederholende Bild am linken oder rechten Rand, jeweils oben oder unten einrasten.Ein Offset in Pixeln positioniert das Bild genau dahin, wo Sie es gern sehen möchten.

Zusätzlich lässt sich über einen kleinen Optionsdialog das Verhalten der Ebene steuern. So entsteht der eigentliche Parallax-Effekt, indem man dem Verhalten Mouse-Move eine Richtung, eine Bewegungsachse und eine Geschwindigkeit zuordnet. Nun bewegt sich die Ebene beim Überfahren mit der Maus in den festgelegten Bahnen. Zusätzlich ist es möglich, dasselbe oder ein anderes Verhalten beim Scrollen mit der Maus hinzuzufügen. Sehr nützlich ist, dass der Editor die vorgenommenen Einstellungen direkt live im Editor umsetzt. So kann mit den Optionen regelrecht gespielt, im Sinne von experimentiert werden.

Ist die Animation den Vorstellungen entsprechend hingebastelt, sorgt ein Klick auf Get Embed Code für den per Copy And Paste zu übernehmenden Scriptcode. Diesen baut man nur noch in den Head-Bereich der eigenen Website ein. Fertig! Viel Spaß damit…

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.

Sortiert nach:   neueste | älteste | beste Bewertung
Mirjam Reitz
Gast

hallöchen, das hört sich ja interessant an, muss ich die animierte Grundvorlage verwenden, oder kann ich auch selber Bilder aus meiner Datei hochladen ? Und die dann als animierter Hintergrund verwenden.? Kann mir das Jemand beantworten? Würde mich freuen.

Hannes
Gast

Vielen Dank für den hilfreichen Post. Der Parallax Background Builder ist genau das was ich gerade gesucht habe. Leider bekomme ich das fertige Ergebnis nicht in einem div dargestellt und finde auch kein passendes Tutorial dazu.

wpDiscuz