Animiertes Storytelling mit globaler Wirkung
Scroll-Animationen
interaktiv
Automatisierung
Für die Stiftung Fair Recycling entstand eine Website, die Nachhaltigkeit nicht nur kommuniziert, sondern erlebbar macht. Komplexe Inhalte werden durch durchdachte Animationen, interaktive Kacheln und smarte Sonderlösungen zu einer kohärenten digitalen Erfahrung.
| Kunde | Stiftung Fair Recycling |
| Partner | ROSAROT Ideennetz AG |
| Umsetzung | September 2024 |
| Branche | Stiftung |
Kennzahlen werden im Slider inszeniert, der Stern teilt sich dabei optisch in die Navigationspfeile auf.
Der Markenstern verändert je nach Seite Grösse, Farbe und Drehung abhängig von der Scrollposition und führt so als lebendes Element durch die gesamte Seite.
Die fix programmierte Spezialunit zeigt interaktive Punkte auf dem Kühlschrank, die bei Hover kontextuelle Bild-Text-Informationen freischalten.
Schweiz- und Brasilien-Karten werden je nach Seitenauswahl zwischen freien Inhaltselementen platziert – mit abgestimmtem Layout für Desktop und Mobile.
Problemstellung
Komplexität
Die Stiftung Fair Recycling engagiert sich international für ökologisch und sozial verantwortungsvolles Recycling. Dieser vielschichtige Auftrag – mit Projekten in der Schweiz und Brasilien, zahlreichen Partnern und einem breiten Themenspektrum – verlangte nach einer Website, die sowohl informiert als auch begeistert.
Die Herausforderung lag in der Vielfalt: Unterschiedliche Inhaltstypen, komplexe Layouts mit stark abweichendem Verhalten auf Desktop und Mobile, editierbare Bereiche neben fest programmierten Sondermodulen und der Anspruch, das visuelle Markenzeichen der Stiftung, den Stern, als lebendes Element durch die gesamte Site zu führen.
Lösung
Bewegung mit Bedeutung
Im Mittelpunkt steht ein ausgeklügeltes Animationssystem rund um den markanten Stiftungsstern. Auf der Startseite verändert er scrollabhängig Grösse und Drehung und teilt sich visuell in die Pfeile des Sliders auf, der Kennzahlen eindrücklich inszeniert. In weiteren Sektionen reagiert der Stern auf die Scrollposition des Nutzers: Er ändert Farbe, verschiebt sich an den Rand oder blendet Inhalte frei – jeweils abgestimmt auf den Kontext des Artikels.
Für die Nachhaltigkeitsziele wurde eine eigene Kachel-Komponente entwickelt: Inhalte werden direkt im CMS erfasst und im Frontend dynamisch als anklickbare Tiles ausgespielt. Der aktive Inhalt erscheint mit einer weichen Überblende-Animation unterhalb der Kacheln.
Das Klimaschutzprojekt erhielt eine eigens programmierte «Kühlschrank»-Unit mit speziellem Layout und interaktiven Hotspots: Hover-Punkte öffnen kontextuelle Bild-Text-Overlays.
Für Seiten mit Länderdarstellung – Schweiz und Brasilien – wurde ein flexibler Spezialbereich entwickelt, der Karten und freie Inhaltselemente auf Desktop und Mobile jeweils optimal anordnet. Abgerundet wird die Lösung durch automatisch gespeiste News-Teaser, einen Partner-Logo-Slider und die Integration von Cookiebot für DSGVO-konformes Cookie-Management.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua
