Ein Monster.Bis ins Detail.
Ducati Monster 1200. Eine Maschine mit Charakter.
Eine Website, die ihn spürbar macht.
Scroll-Animationen von WOSA · Rotkreuz, Zug
Mehr als ansehen.
Selbst entdecken.
Scroll-Animationen verbinden die Bewegung auf Deiner Website mit einer Bildgeschichte. Hier wird die Ducati Monster 1200 zum interaktiven Beispiel: Mit jedem Scroll löst sich das Ganze in seine Details auf.
Du gibst das Tempo vor
Italienischer Charakter.
Unverkennbar Monster.
Modellreihe 2015
Manche Motorräder erkennt man am Emblem. Eine Monster erkennt man an ihrer Silhouette.
Der geformte Tank, der sichtbare Gitterrohrrahmen und die Einarmschwinge machen die 1200er zum passenden Motiv für einen Blick hinter die Oberfläche.
Im Modelljahr 2015 arbeitet hier der flüssigkeitsgekühlte Testastretta 11° DS: ein L-Zweizylinder mit 1'198,4 cm³. Die Standardversion liefert laut damaligem Ducati-Prospekt 135 PS und 118 Nm.
Drei Riding Modes – Sport, Touring und Urban – gehören ebenso zur Baureihe wie Ride-by-Wire, Traktionskontrolle, ABS und das farbige TFT-Display.
1200 und 1200 S im VergleichZwei Varianten.
Dieselbe DNA.
Die S ergänzt das Konzept um mehr Leistung, Öhlins-Fahrwerk und grössere vordere Bremsscheiben.
| Im Vergleich | 1200 | 1200 S |
|---|---|---|
| Leistung bei 8'750/min | 135 PS | 145 PS |
| Drehmoment bei 7'250/min | 118 Nm | 124,5 Nm |
| Fahrwerk vorn / hinten | Kayaba / Sachs | Öhlins / Öhlins |
| Bremsscheiben vorn | 2 × 320 mm | 2 × 330 mm |
| Gewicht fahrbereit | 209 kg | 209 kg |
| Tankinhalt | 17,5 l | 17,5 l |
Quelle: Ducati-Originalprospekt, technische Daten (PDF). Zur Einordnung: Modellübersicht bei MOTORRAD. Dort werden teils abweichende Leistungswerte geführt. Die Tabelle zeigt die damaligen Herstellerangaben, keine Messwerte des abgebildeten Motorrads.
Dein Scroll.
Die Regie.
Produkte erklären sich besser,
wenn man sie entdecken kann.
Hier läuft kein Video von allein. Deine Scrollposition bestimmt, welches Bild Du siehst. Vorwärts, rückwärts, kurz innehalten: Du entscheidest.
121 Bilder. Eine durchgehende Bewegung. GSAP ScrollTrigger übersetzt die Scrollstrecke in den passenden Frame. Ein Canvas hält die Darstellung zusammen, während die Bildfläche für diesen Moment im Blick bleibt.
Das Prinzip funktioniert auch für Maschinen, Möbel, Architektur oder einen Produktionsablauf. Wir entwickeln die Bildgeschichte und die passende Website so, dass aus einem komplexen Produkt ein verständliches Erlebnis wird.
Die Explosionsansicht ist eine visuelle Inszenierung zur Demonstration der Webtechnik, keine technische Montage- oder Reparaturanleitung.
Was lässt sich aus Deinem Produkt machen?Vom Produkt
zum Erlebnis.
Die Bewegung ist das Ergebnis.
Die gute Geschichte beginnt davor.
- 01
Verstehen.
Was macht Dein Produkt besonders? Gemeinsam legen wir fest, was sichtbar werden soll – und in welcher Reihenfolge.
- 02
Inszenieren.
Aus Fotos, Video oder einem 3D-Modell entsteht eine Bildsequenz. Perspektive, Licht und Übergänge erzählen dieselbe Geschichte.
- 03
In Bewegung bringen.
Wir verbinden die Bilder mit dem Scrollen und stimmen Tempo, Texte und Darstellung auf Desktop und Smartphone ab.
- 04
Fein abstimmen.
Ladeverhalten, Bedienung und reduzierte Bewegung werden geprüft. Erst dann bekommt das Erlebnis seinen Platz auf Deiner Website.
Gut zu wissen.
Bevor es losgeht.
Fragen zu scrollgesteuerten Animationen – und ehrliche Antworten aus der Umsetzung.
Noch eine Frage?Was ist eine scrollgesteuerte Animation?
Eine Animation, deren Fortschritt an Deine Scrollposition gekoppelt ist. Hier wechseln wir zwischen 121 Einzelbildern. Anders als bei einem automatisch laufenden Film bestimmst Du selbst das Tempo und kannst durch Zurückscrollen jedes Detail erneut ansehen.
Welche Bilder oder Daten braucht WOSA dafür?
Ideal sind eine abgestimmte Bildserie, ein passender Videoclip oder ein 3D-Modell des Produkts. Für eine Explosionsansicht müssen auch die auseinandergezogenen Zustände gestaltet werden. Eine einzelne Produktaufnahme allein enthält diese Informationen noch nicht. Wir klären mit Dir, welches Ausgangsmaterial sinnvoll ist.
Funktioniert das auch auf dem Smartphone?
Ja. Die Animation folgt auch dem Scrollen per Finger. Auf schmalen Bildschirmen bleibt hier die gesamte Bildbreite sichtbar, damit die auseinandergezogenen Bauteile nicht abgeschnitten werden. Bildauflösung und Ladeverhalten lassen sich für das jeweilige Projekt abstimmen.
Wird meine Website dadurch langsamer?
Eine Bildsequenz benötigt mehr Daten als ein einzelnes Foto. Deshalb sind Bildgrösse, Komprimierung und gezieltes Vorladen entscheidend. Diese Demo lädt die Sequenz erst in der Nähe des Erlebnisbereichs und begrenzt parallele Anfragen. Der restliche Inhalt bleibt währenddessen bedienbar.
Was passiert, wenn ich weniger Bewegung möchte?
Die Seite berücksichtigt die Systemeinstellung für reduzierte Bewegung. Dann wird die Sequenz als Standbild ohne festgehaltenen Scrollbereich gezeigt. Du kannst die Animation ausserdem direkt im Erlebnisbereich ausschalten oder überspringen. Die übrigen Inhalte bleiben zugänglich.
Kann die Animation in meine bestehende Website?
In vielen Fällen ja. Der Erlebnisbereich kann als eigenständiger Abschnitt eingebunden werden. Wir prüfen vorher das CMS, vorhandene Skripte, die mobile Darstellung und das verfügbare Bildmaterial, damit die Animation zur bestehenden Seite passt.
Was kostet ein solches Projekt?
Der Aufwand hängt vor allem vom Ausgangsmaterial, der Bildproduktion und der Integration ab. Eine vorhandene Sequenz einzubauen ist etwas anderes, als ein Produkt zuerst in 3D aufzubauen. Schick uns Deine Idee und vorhandenes Material – darauf basierend erstellen wir eine passende Offerte.
Dein Produkt hat
eine Geschichte.
Zeigen wir sie.
Eine erste Idee reicht.
Wir machen gemeinsam etwas daraus,
das man nicht einfach wegscrollt.