LMBaustein 01 · zum Ausprobieren und Übernehmen
Vorher/Nachher-Schieber
Zwei Bilder, ein Griff. Der Besucher zieht die Linie und sieht den Unterschied, statt ihn zu lesen. Für Maler, Gartenbau, Sanierung, Kosmetik — und für jede Website-Überarbeitung.
vorher
nachher
Schematische Darstellung, kein Kundenprojekt. Sie zeigt die typischen Unterschiede — Hauptaussage statt Begrüssungsfloskel, anrufbare Nummer statt Fax, Gliederung statt Textwand. Ziehen Sie den Griff, oder klicken Sie ihn an und benutzen Sie die Pfeiltasten.
Mit eigenen Bildern ausprobieren
Ihre Bilder bleiben auf Ihrem Gerät. Sie werden nicht hochgeladen — der Browser zeigt sie direkt aus dem Arbeitsspeicher an.
Am besten funktionieren zwei Bilder mit gleichem Ausschnitt und gleichem Seitenverhältnis — sonst springt der Übergang.
Was der Baustein kann
- Bedienbar mit Maus, Finger und Tastatur (Pfeiltasten, Pos1, Ende)
- Für Vorleseprogramme als Schieberegler angekündigt, mit erklärender Beschriftung
- Keine fremde Bibliothek, kein Framework — rund 40 Zeilen CSS, 4 Zeilen JavaScript
- Ohne JavaScript bleibt das «vorher»-Bild sichtbar; nichts bricht
- Senkrechtes Scrollen auf dem Handy bleibt möglich (
touch-action) - Respektiert
prefers-reduced-motion
Code zum Übernehmen
Vollständig und eigenständig: HTML, CSS und JavaScript in einem Stück. Ersetzen Sie die beiden Bildquellen und die Alt-Texte — fertig.
Nächster Schritt
Sie hätten gern ein echtes «nachher»?
Für CHF 190 bauen wir einen Vorentwurf Ihrer Startseite — keine Skizze, sondern eine gebaute Seite, die Sie im Browser anschauen können. Sie sehen zuerst, was möglich ist, und entscheiden dann. Beauftragen Sie uns, werden die 190 voll angerechnet.