Animierte Startseiten-Kacheln

Die vier Startseiten-Kacheln werden beim Laden der Seite nacheinander eingeblendet. Dabei bewegen sie sich von unten in ihre endgültige Position und werden gleichzeitig leicht vergrößert und gedreht. Durch die zeitlich versetzten Animationen entsteht ein dynamischer und geordneter Aufbau der Kachelreihe.

Nach dem Einblenden schweben die Kacheln dezent auf und ab. Zusätzlich läuft in regelmäßigen Abständen ein heller Glanzeffekt über die Bilder. Beim Überfahren mit der Maus wird die jeweilige Kachel leicht angehoben, vergrößert und durch einen stärkeren Schatten hervorgehoben. Das enthaltene Bild erhält gleichzeitig einen sanften Zoom-Effekt.

Verwendete Technik

Die Animation wurde vollständig mit CSS umgesetzt und benötigt kein JavaScript. Verwendet werden CSS-Keyframes, Übergänge, Transformationen, Schatten sowie lineare und radiale Farbverläufe. Die unterschiedlichen Startzeiten der einzelnen Kacheln werden über nth-child und individuelle animation-delay-Werte gesteuert.

Auf mobilen Geräten werden die Bewegungen automatisch reduziert. Zusätzlich berücksichtigt der Code die Barrierefreiheit: Hat ein Besucher in seinem Betriebssystem reduzierte Bewegungen aktiviert, werden die Animationen über prefers-reduced-motion vollständig deaktiviert.

Die Kacheln sind vollständig anklickbar und führen direkt zu den jeweils hinterlegten Gambio-Serviceleistungen.