Herangehensweise
Der Anfang mit einem Storyboard
Zuerst erstellte ich eine Skizze in Form eines Storyboards, um die Animation genau zu planen. Dabei überlegte ich mir, wie die einzelnen Elemente erscheinen, interagieren und den Nutzer durch den Banner führen sollten. Der Fokus lag darauf, Bewegung und Interaktivität gezielt einzusetzen, um die Marke lebendig zu präsentieren
Grafische Elemente
Bevor ich mit der Programmierung begann, habe ich die einzelnen grafischen Elemente, wie Icons und die Bilderboxen, in Photoshop gestaltet. So konnte ich sicherstellen, dass das visuelle Design perfekt zu den Animationen passt und ein harmonisches Gesamtbild entsteht.
Die umsetzung
In der Umsetzungsphase begann ich mit der Struktur in HTML und CSS, um ein solides Fundament zu schaffen. Danach habe ich die Animationen mit GSAP Schritt für Schritt integriert und getestet, um flüssige Übergänge und präzise Bewegungen zu gewährleisten. Besonders herausfordernd war es, die interaktiven Elemente so einzubauen, dass sie benutzerfreundlich und visuell ansprechend sind.
Das fertige Ergebnis ist ein lebendiger Werbebanner, der nicht nur die Marke Sunrise widerspiegelt, sondern auch durch seine Interaktivität die Aufmerksamkeit der Nutzer auf sich zieht
