Skischule Brunner: Eine Website, die vom Gipfel ins Tal fährt
Für die Qualitäts-Skischule Brunner in Bad Kleinkirchheim haben wir eine Website gebaut, auf der man beim Scrollen ins Tal fährt: 841 Einzelbilder, 3D-Tiefe per WebGL und ein Panda zum Anklicken.
Eine Skischule verkauft keinen Kurs, sondern einen Tag am Berg. Genau dieses Gefühl sollte die neue Website der Qualitäts-Skischule Brunner in Bad Kleinkirchheim transportieren, schon bevor jemand eine Anfrage schickt. Herausgekommen ist eine Seite, auf der man nicht einfach scrollt, sondern vom Gipfel ins Tal fährt.
In diesem Beitrag zeigen wir, was hinter der Scroll-Fahrt steckt, wie die 3D-Tiefe entsteht und warum eine so verspielte Website trotzdem sauber für Google und KI-Assistenten lesbar ist.
Die Ausgangslage: 25 Jahre Erfahrung, ein Auftritt von gestern
Die Skischule Brunner unterrichtet seit 25 Jahren direkt an der Kaiserburgbahn. Rund 20 Skilehrerinnen und Skilehrer arbeiten unter der Leitung von Gerhard Brunner, staatlich geprüfter Diplom-Skilehrer und Skiführer. Der Schwerpunkt liegt auf Privatunterricht für Erwachsene und Kinder, dazu kommen Kinderskikurse ab drei Jahren.
Das Ziel des Relaunchs war klar: Familien sollen auf einen Blick sehen, was die Skischule bietet, was es kostet und wie sie anfragen. Und sie sollen sich dabei schon ein bisschen wie im Skiurlaub fühlen.
Die Idee: Der Besucher fährt selbst
Statt eines statischen Titelbilds startet die Startseite am Gipfel neben dem Sessellift. Mit jeder Scroll-Bewegung geht es ein Stück weiter talwärts: vorbei an einer Kindergruppe, über einen Sprung, durch den Wald bis ins Dorf. Unterwegs tauchen die Inhalte der Seite auf, von den Skikursen über die Bildergalerie bis zum Standort und zur Anfrage.
Das Making-of: In vier Schritten zur Abfahrt
Die Abfahrt besteht aus acht Stationen vom Gipfel ins Tal, und jede Station ist ein Kapitel der Startseite. Wie daraus eine durchgehende Fahrt wird, zeigt das ausführliche Making-of in gut zwei Minuten.
Schritt 1: Acht Schlüsselbilder
Für jede Station entstand zuerst ein Standbild, erstellt mit einem KI-Bildmodell (Gemini). Damit der Panda in jeder Szene gleich aussieht, diente immer dieselbe Panda-Vorlage als Referenz. Diese acht Bilder legen fest, wo die Fahrt vorbeiführt: Sessellift, Hütte, Kindergruppe, Sprung, Wald und Dorf.
Schritt 2: Sieben Kamerafahrten
Zwischen je zwei Schlüsselbildern erzeugte ein KI-Videomodell (Kling) eine Kamerafahrt von rund fünf Sekunden. Start- und Endbild waren dabei vorgegeben, so schließen die sieben Fahrten nahtlos aneinander an.
Schritt 3: 841 Einzelbilder, gesteuert vom Scrollrad
Die Fahrten wurden anschließend in 841 Einzelbilder zerlegt. Die Scroll-Position entscheidet, welches Bild gerade gezeigt wird. Das hat einen großen Vorteil gegenüber einem normalen Video: Der Besucher hat die volle Kontrolle. Er kann anhalten, zurückfahren oder durchrauschen, und die Fahrt bleibt immer flüssig.
Damit sich niemand verirrt, zeigt eine schmale Leiste am rechten Rand an, wo man sich zwischen Gipfel und Tal befindet. Wer keine Bewegung möchte, kann die Animation über einen eigenen Schalter pausieren.
Schritt 4: Tiefenkarten für echte 3D-Tiefe
Zu jedem Standbild gehört eine Tiefenkarte. Sie beschreibt für jeden Bildpunkt, wie weit er vom Betrachter entfernt ist. Im Browser zerlegt WebGL mit three.js das Bild daraus in Vorder-, Mittel- und Hintergrund. Die Ebenen verschieben sich unterschiedlich schnell, und aus einem flachen Bild wird ein räumliches.
Dieselbe Fahrt, zwei Formate
Am Handy funktioniert ein breites Querformat-Bild nicht. Deshalb hat die mobile Website eine eigene Bildfolge im Hochformat. Der Bildausschnitt folgt dem Panda, und statt zu klicken tippt man ihn an. So fühlt sich die Abfahrt am Smartphone genauso an wie am großen Bildschirm.
Vom Maskottchen zum 3D-Panda
Den Panda gab es schon lange vor der Website: Er ist das Maskottchen der Skischule, das Kinder aus dem Kurs und vom Pistenschild kennen. Für die Website wurde daraus ein 3D-Charakter, mit Helm für die Fahrt und der Startnummer 1 wie beim Original.
Auf der Website ist er weit mehr als ein Bild: Er fährt die Abfahrt mit, reagiert, wenn man ihn anklickt, und jede Unterseite hat ihren eigenen Panda, vom Kinderskikurs über die Preise bis zur Webcam. Das macht die Seite gerade für Familien sympathisch und gibt der Skischule ein Gesicht, das man wiedererkennt.
Mehr als Show: Was die Website im Alltag leistet
So verspielt die Startseite ist, die eigentliche Aufgabe bleibt nüchtern: Anfragen bringen und das Telefon entlasten. Deshalb steckt hinter der Animation eine klar aufgebaute Website.
- Dreisprachig: Die gesamte Seite gibt es auf Deutsch, Englisch und Italienisch, passend zu den Gästen in Bad Kleinkirchheim.
- Klare Wege zur Anfrage: Ein Formular, das direkt nach Privatunterricht oder Kinderkurs unterscheidet, dazu eine eigene Seite für Preise und Termine.
- Live-Webcam: Ein aktuelles Bild aus Bad Kleinkirchheim zeigt, wie es gerade am Berg aussieht.
- Ratgeber-Inhalte: Artikel wie „Erster Skitag mit Kind“ oder „Gruppenkurs oder Privatstunde?“ beantworten typische Fragen, bevor sie am Telefon landen.
- Bildergalerie und Unterseiten: Eigene Seiten für Privatunterricht, Skitechnik, Snowboard und Langlauf, Kinderskikurs, Anreise und das Appartement der Familie.
Lesbar für Google und für KI-Assistenten
Eine aufwendige Animation darf die Auffindbarkeit nicht kosten. Alle Inhalte stehen deshalb als echter Text auf der Seite und nicht in Bildern versteckt. Jede Seite hat eigene Titel, Beschreibungen und Vorschaubilder für Social Media.
Zusätzlich haben wir die Website für KI-Assistenten vorbereitet. Unter skischule-brunner.at/llms.txt liegt eine kompakte Zusammenfassung mit allen wichtigen Fakten, und jede Unterseite gibt es zusätzlich als schlanke Markdown-Fassung. Fragt jemand ChatGPT, Claude oder Gemini nach einer Skischule in Bad Kleinkirchheim, finden diese Systeme Preise, Kurszeiten und Kontakt in einer Form, die sie zuverlässig verstehen.
Was andere Unternehmen davon mitnehmen können
Nicht jede Website braucht eine 3D-Abfahrt. Aber jede Website profitiert von der Frage, die am Anfang dieses Projekts stand: Was ist das Gefühl, das Kunden mit uns verbinden, und wie machen wir es online erlebbar? Für eine Skischule ist das die Fahrt ins Tal. Für ein Hotel ist es vielleicht der Blick vom Balkon, für einen Handwerksbetrieb der Moment, in dem ein Raum fertig ist.
Wichtig ist, dass die Inszenierung den Inhalt trägt statt ihn zu verdecken. Die Scroll-Fahrt der Skischule Brunner sorgt für den Wow-Moment, die klare Struktur dahinter für die Anfragen.
Neugierig geworden? Probieren Sie die Abfahrt selbst aus auf skischule-brunner.at, und wenn Sie für Ihr Unternehmen etwas Ähnliches suchen, sprechen Sie uns gern an.