Animationen & Effekte

Zwei Arten von Effekten

BirdBuild kennt zwei getrennte Dinge, die man leicht durcheinanderbringt. Die Einblend-Animation spielt einmal ab, wenn ein Element beim Scrollen ins Sichtfeld rutscht – es fliegt zum Beispiel sanft von unten herein. Die Hover-Animation dagegen reagiert dauerhaft auf die Maus: Fährst du über eine Karte, hebt sie sich leicht an. Die erste gibt es für Module und ganze Abschnitte, die zweite nur für ein paar karten-artige Module.

Ein Element beim Scrollen einblenden

Klick im Builder auf das Modul oder den Abschnitt, den du animieren willst – rechts öffnet sich das Einstellungs-Panel. Geh dort oben auf den Tab Design und scroll nach unten zur Klappkarte „Einblend-Animation". Im Feld „Beim Scrollen einblenden" wählst du eine Richtung:

• Sanft einblenden – nur ein weiches Aufblenden, ohne Bewegung. Dezent und fast immer passend.
• Von unten / Von oben / Von links / Von rechts – das Element gleitet aus der jeweiligen Richtung herein (rund 30 Pixel Weg).
• Zoom – startet minimal kleiner und wächst auf die volle Größe.
• Herauszoomen, Weit von unten, Kippen, Drehen, Schräg, Aus der Unschärfe, Federnd – kräftigere Auftritte für Hingucker; sparsam einsetzen.

Animationen gibt es für Module, Spalten und Sektionen. Unter „Beim Überfahren“ hebt, zoomt, leuchtet oder neigt sich ein Modul, sobald die Maus darüber steht (Karten-Module bewegen ihre einzelnen Karten). „Grau → Farbe“ zeigt ein Bild erst beim Drüberfahren in Farbe. Den Effekt siehst du schon im Baukasten, wenn du mit der Maus über den Block fährst – solange du darin tippst, bleibt er ruhig. Ein Hintergrundbild bekommt unter „Hintergrund & Farben“ den Parallax-Effekt: Das Bild bleibt stehen, der Inhalt gleitet darüber. Am Handy und bei „weniger Bewegung“ in den Systemeinstellungen bleibt alles ruhig. Wo das stehende Bild nicht gemalt werden kann (Ganzseiten-Aufnahme, Vorschaubild, Druck), zeigt der Bereich seine Hintergrundfarbe – die Schrift bleibt lesbar.

Sobald eine Animation gewählt ist, tauchen zwei Zahlenfelder auf. Dauer (ms) steuert, wie lange das Einblenden läuft – Standard sind 700 Millisekunden, sinnvoll ist irgendwo zwischen 100 und 3000. Und Verzögerung (ms) lässt das Element später starten. Genau darüber baust du gestaffelte Effekte: Gib der ersten Karte 0, der zweiten 150 und der dritten 300 – dann erscheinen sie nacheinander statt alle auf einmal. Lässt du die Felder leer, gelten 700 ms Dauer und 0 ms Verzögerung. Mit Stärke (25 bis 200 %) bestimmst du, wie kräftig das Einblenden ausfällt: weniger heißt kürzerer Weg, kleinerer Winkel und weniger Zoom oder Unschärfe – beim reinen Einblenden startet das Element dann schon halb sichtbar. 100 % ist der Standard.

Warum sich im Editor nichts bewegt

Ein Punkt, der am Anfang irritiert: Während du am Bauen bist, bleibt alles ganz normal sichtbar – die Einblend-Animation läuft im Bearbeiten-Modus bewusst nicht, sonst würden dir Elemente ständig weggeblendet. Sehen kannst du den Effekt trotzdem sofort. Klick unten links in der Werkzeugleiste auf das Augen-Symbol (Vorschau) und scroll dann durch die Seite. Dort spielt die Animation genauso ab wie später auf der echten, veröffentlichten Website.

Hover-Animation für Karten

Manche Module bekommen zusätzlich einen Effekt für den Mauszeiger. Das betrifft die karten-artigen Blöcke – also zum Beispiel Bento-Grid, Portfolio, Logo-Leiste, Karte, Preis-Tabelle, Team-Mitglied, Testimonial und Galerie. Wähl so ein Modul aus, geh in den Tab Design, und dort erscheint die Klappkarte „Interaktion" mit dem Feld „Hover-Animation". Zur Wahl stehen:

• Heben – die Karte schwebt beim Überfahren ein Stück nach oben und wirft einen Schatten.
• Zoom – sie vergrößert sich leicht.
• Leuchten – ein farbiger Schein legt sich um die Karte (in deiner Markenfarbe).
• Neigen – die Karte kippt minimal in den Raum, wie ein 3D-Effekt.

Findest du bei einem Modul keine „Interaktion"-Karte, dann ist der Hover-Effekt für diesen Modultyp einfach nicht vorgesehen – das ist Absicht, nicht ein Fehler.

Rücksicht auf Nutzer und Suchmaschinen

Die Animationen sind so gebaut, dass sie niemanden ausbremsen. Wer im Betriebssystem „Bewegung reduzieren" aktiviert hat (das stellen Menschen ein, denen Animationen unangenehm sind), sieht alle Inhalte sofort und ruhig, ohne Flug- oder Zoom-Effekt. Und selbst wenn im Browser JavaScript deaktiviert ist, bleibt jeder Inhalt sichtbar – es verschwindet also nie etwas, nur weil ein Effekt nicht laufen konnte. Du kannst Effekte deshalb bedenkenlos einsetzen, ohne dir um Barrierefreiheit oder Auffindbarkeit Sorgen zu machen.

Ein paar Empfehlungen aus der Praxis

Weniger ist meistens mehr. Ein sanftes „Von unten" auf Überschriften und Karten wirkt edel; wenn dagegen jeder Block aus einer anderen Richtung hereinfliegt, wird es schnell unruhig. Für längere Seiten lohnt es sich, ganze Abschnitte zu animieren statt jedes einzelne Modul darin – das gibt einen ruhigeren Rhythmus beim Scrollen. Und die Staffelung über die Verzögerung ist der Trick, mit dem eine Reihe gleicher Karten richtig gut aussieht.