Mit HTML, CSS und ein bisschen JavaScript baust du eine personalisierte digitale Weihnachtskarte, die du per QR-Code an beliebig viele Menschen verschickst – jede mit individuellem Namen, ohne den Code anzufassen. Dieses Tutorial zeigt dir Schritt für Schritt, wie URL-Parameter, CSS-Animationen und eine Schnee-Animation zusammenspielen. Ein echtes Mini-Projekt, das du in wenigen Stunden umsetzt und direkt vorzeigen kannst.
Was du am Ende in den Händen hältst
Die Weihnachtskarte ist eine einzelne Website mit drei Teilen: einer animierten Überschrift mit dem Namen der beschenkten Person, einem kleinen persönlichen Bereich mit Text und Bild und einer Schnee-Animation im Hintergrund. Der Name wird per URL-Parameter übergeben, also per ?name=Maria am Ende des Links. Das bedeutet: du verwendest dieselbe Website für alle, änderst nur den Wert im QR-Code je nach Person.
Technisch brauchst du drei Dateien: index.html, main.css und zwei JavaScript-Dateien für den Namenseffekt und den Schnee. Kein Framework, kein Build-Tool, kein npm.
HTML und CSS: Grundstruktur und Typografie
Das HTML ist überschaubar. Eine h1 mit der Klasse heading enthält den Begrüßungstext und ein leeres <span id="name">, das später per JavaScript befüllt wird. Darunter kommt ein unsichtbares Füllelement mit height: 100vh, das dafür sorgt, dass der Content-Bereich erst nach dem Scrollen sichtbar ist. Der eigentliche Inhalt folgt in einem div#content.
Für die Typografie greifst du auf Google Fonts zurück, genauer auf die Schriftart Mountains of Christmas. Die h1 wird mit position: absolute, top: 50%, left: 50% und transform: translate(-50%, -80%) mittig auf dem Bildschirm platziert. Die Schriftgröße läuft über vmax-Einheiten, damit die Karte auf Handys und Tablets gleich gut aussieht.
Für die Desktop-Ansicht legst du eine Media Query ab min-width: 1000px an, die die Schriftgröße auf 7rem begrenzt, weil 9vmax auf großen Bildschirmen schlicht zu groß wirkt.
JavaScript: Dynamischer Name und Leuchteffekt
Der Leuchteffekt funktioniert so: jeder Buchstabe des Namens bekommt sein eigenes <span> mit einer eindeutigen ID. Per rekursivem setTimeout toggeln die Spans abwechselnd zwischen den CSS-Klassen .red und .green. Das Ergebnis sind Buchstaben, die wie Weihnachtslichter blinken.
Den Namen holst du über die URL Search Params API, die in allen modernen Browsern verfügbar ist: