Landingpage Wintermarkt Wahlen

Am 30.11.2024 ist es soweit und der Wintermarkt in Wahlen findet wieder statt. Ich habe dafür die Landingpage überarbeitet und gebe ein paar Einblicke in die Neuerungen.

Der Wintermarkt wird vom Familienverein Wahlen organisiert. Die Landing Page ist eine Unterseite des Vereins.

Schneeflöckchen

Wie auch bei der letzten Version vor zwei Jahren durften die animierten Schneeflöckchen nicht fehlen. Dieses Mal habe ich mich jedoch von der Web Component <snow-fall> von Zach Leatherman bedient. Damit schneit es nun auch über den Viewport hinab und die Flocken lassen sich nach Belieben konfigurieren.

Stand Tracker

Die Marktstände sind wieder in einer horizontal scrollbaren Tabelle aufgelistet. Neu lassen sich die bereits besuchten Stände «abhaken». Nebst dem es einen Wettbewerb geben wird, ist dies ebenfalls ein Feature, welches die Besucherinnen und Besucher animieren soll, möglichst viele Stände zu besuchen.

Die farbige Nummer in der ersten Spalte ist ein Button, welcher beim Klicken ein lokales Cookie speichert. Das Cookie wird verwendet um den Button grün zu färben, den Fortschrittsbalken und die Zahl in der Infobox per JavaScript zu verändern.

Mithilfe eines zusätzlichen Buttons oberhalb der Standübersicht können entweder alle Stände oder nur die noch nicht besuchten angezeigt werden.

Interaktive Karte

Die interaktive Karte wird im ganzen Fenster angezeigt und kann mit dem X-Button oben rechts wieder geschlossen werden.

Eine Herausforderung, dass sie zentriert angezeigt wird und in alle Richtungen gescrollt werden kann, konnte ich mit Hilfe von Vesa Piittinen lösen.