{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "vorher-nachher-vergleichsregler",
 "name": "Vorher-Nachher-Vergleichsregler",
 "name_en": "Before/after image comparison slider",
 "kurz": "Zwei deckungsgleiche Bilder übereinander, ein Griff teilt sie: Man prüft den Unterschied selbst, statt ihn behauptet zu bekommen.",
 "kategorie": "Galerien & Slider",
 "kategorie_slug": "galerien-slider",
 "kategorie_nr": 12,
 "bau_chat": "C6",
 "prioritaet": "C",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "präzise"
 ],
 "stimmung_roh": [
  "sachlich",
  "funktional",
  "präzise"
 ],
 "technik": [
  "css",
  "clip-path",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "css",
  "js"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Zwei deckungsgleiche Bilder liegen übereinander, etwa vorher und nachher, alt und neu, roh und bearbeitet. Ein senkrechter Regler mit Griff teilt die Fläche. Ziehen oder Pfeiltasten verschieben die Grenze, das obere Bild wird per clip-path beschnitten. In den Ecken stehen Labels für vorher und nachher, oft gibt es Reiter für mehrere Beispiele. Variante Lupe: Ein Fenster folgt dem Zeiger und zeigt dort die Nachher-Version.",
  "warum_es_wirkt": "Der Nutzer prüft den Unterschied selbst, statt ihn nur behauptet zu bekommen. Das überzeugt mehr als zwei Bilder nebeneinander. Die eigene Handbewegung macht die Verbesserung spürbar.",
  "wann_einsetzen": "Renovierung, Umbau und Architektur, Relaunch-Fallstudien (alte gegen neue Website), Retusche und Bildbearbeitung, Upscaling- und KI-Werkzeuge, Vergleiche von Farbe oder Theme.",
  "wann_nicht": "Wenn die Bilder nicht exakt deckungsgleich sind, denn Versatz zerstört den Effekt. Bei sehr kleinen Unterschieden ohne Zoom. Wenn das Ziehen auf Touch mit dem Scrollen der Seite kollidiert und das nicht sauber gelöst ist.",
  "varianten": [
   "Natives input type=range über dem Bild, nur der Griff ist greifbar (Clipdrop)",
   "Reiter für mehrere Beispiele mit Vorher/Nachher-Chips (upscale.media)",
   "Lupe: Fenster folgt dem Zeiger, clip-path inset(… round 12px), gelerpt (Topaz Labs)",
   "Hover: die Grenze folgt der Maus ohne Klick",
   "Waagerechte Teilung oder diagonaler Schnitt"
  ],
  "umsetzung": "Markup: figure mit zwei Bildern (beide grid-area 1/1) und einem input type=range. CSS: .nachher { clip-path: inset(0 0 0 var(--pos)) }, Trennlinie und Griff bei left: var(--pos). JS setzt nur --pos aus dem Wert des Reglers. Das Range-Input liegt über der ganzen Breite, transparent und mit pointer-events none; nur der Daumen bekommt pointer-events all. So bleiben Tastatur und Wertansage nativ. touch-action: pan-y am Container, damit die Seite auf Touch weiter scrollt. Lupe: Zeigerposition lerpen (0,15 bis 0,2) und als clip-path inset() mit round-Radius setzen. Beide Bilder exakt gleich groß exportieren.",
  "mobil": "Großer Griff mit mindestens 44 px Touch-Fläche und touch-action: pan-y. Die Lupe mobil durch den Regler ersetzen oder kleiner machen (Topaz teilt durch 1,5).",
  "reduzierte_bewegung": "Den Regler nicht automatisch hin und her animieren. Lupe ohne Nachlauf (Lerp 1).",
  "barrierefreiheit": "Natives input type=range mit aria-label und aria-valuetext (z. B. „60 % Nachher sichtbar“). Beide Bilder mit eigenem Alternativtext. Sichtbarer Fokus am Griff. Die Lupe ist nur Zusatz, der Inhalt bleibt ohne Maus erreichbar."
 },
 "messwerte": {
  "easing": "Regler direkt (ohne Easing); Lupe: Lerp 0.2 (Fenster) / 0.035 (Bildversatz); Größenwechsel cubic-bezier(0.5,0.1,0.2,1)",
  "dauer_ms": "Lupe: Fenstergröße 350; Zoom 1500; Hover-Scale 500",
  "stagger_ms": "",
  "distanz": "Clip 0–100 %; Lupenfenster 30rem; Zoom 250 %",
  "sonstiges": "Clipdrop-Griff 38×30px, Radius 12px; Topaz-Clip mit round 12px, Hover scale 1.025 und brightness 1.05.",
  "herkunft": "beobachtet",
  "quelle": "https://clipdrop.co/_next/static/css/067f8a6184991666.css; https://www.topazlabs.com/"
 },
 "kurve": {
  "bezier": [
   0.5,
   0.1,
   0.2,
   1.0
  ],
  "css": "cubic-bezier(0.5, 0.1, 0.2, 1)",
  "name": "eigene Kurve",
  "dauer_ms": 350
 },
 "gesehen_bei": [
  {
   "seite": "Clipdrop",
   "url": "https://clipdrop.co/",
   "auszeichnung": "",
   "beobachtung": "Im Startseiten-CSS-Bundle: .image-comparison-slider als natives input range über dem Bild (position absolute, mittig, appearance none, transparent, pointer-events none). Nur der Thumb ist greifbar (pointer-events all): 38×30px, 1.5px weißer Rand, border-radius 12px, SVG-Pfeilsymbol, cursor grab bzw. grabbing. Damit sind Tastatur und Screenreader-Wert ohne eigenes JS abgedeckt.",
   "art": "website"
  },
  {
   "seite": "upscale.media",
   "url": "https://www.upscale.media/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft: UpscaleToolDemo mit Kategorie-Tabs (z. B. ‚E-commerce‘), SliderWrapper und BeforeAfterLabels-Chips ‚Before‘/‚After‘ über dem Vergleichsbild.",
   "art": "website"
  },
  {
   "seite": "Topaz Labs",
   "url": "https://www.topazlabs.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (Inline-Script und CSS): .before-after-enhance-box als Lupen-Variante, cursor crosshair. Das Nachher-Bild liegt in .baeb-image-afterwrap mit clip-path: inset(… round 12px), Fenster 30rem × 30rem, Position über CSS-Variablen --cliptop/--clipleft/… per rAF gelerpt (Box 0.2, Bild 0.035, Abbruchschwelle 0.01). Aktiv: Bild auf 250 % (Übergang 1.5s cubic-bezier(0.3,0,0.6,1)), Fenstergröße 0.35s cubic-bezier(0.5,0.1,0.2,1); Hover scale 1.025 und brightness 1.05 in 0.5s cubic-bezier(0,0.25,0.5,1); mobil Skalierungsteiler 1.5.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Cloud Four – Building an accessible image comparison web component",
   "url": "https://cloudfour.com/thinks/building-an-accessible-image-comparison-web-component/"
  }
 ],
 "kombinierbar_mit": [
  "case-study-geruest",
  "cursor-masken-reveal",
  "galerie-shared-element-vollbild",
  "graustufen-zu-farbe"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/galerien-slider/vorher-nachher-vergleichsregler/",
  "meta": "https://cecodesign.de/lab/fundus/galerien-slider/vorher-nachher-vergleichsregler/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/galerien-slider/vorher-nachher-vergleichsregler/demo"
 },
 "herkunft": {
  "quelldateien": [
   "patch-luecken-a.json"
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Zwei deckungsgleiche Bilder übereinander, ein Griff teilt sie: Man prüft den Unterschied selbst, statt ihn behauptet zu bekommen.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "regler": "natives input type=range 0–100, Schritt 1, über die ganze Breite (Breite + 44 px Daumen), pointer-events none, nur der Daumen 44 × 44 px greifbar; Grenze direkt ohne Easing",
   "clip": "Nachher-Bild clip-path: inset(0 0 0 var(--pos)), --pos 0–100 %",
   "griff": "38 × 30 px, Radius 12 px, 1,5 px weißer Rand (Clipdrop); Touch 44 × 34 px; Hover scale 1.06 in 150 ms",
   "klick": "Klick auf das Bild gleitet in 350 ms mit cubic-bezier(0.5, 0.1, 0.2, 1) an die Stelle",
   "hover_variante": "Grenze folgt dem Mauszeiger; beim Verlassen gleitet sie in 350 ms auf 50 % zurück",
   "lupe_variante": "Fenster min(240px, 42 % der Breite), clip-path inset(… round 12px); Position gelerpt 0,2 je Bild bei 60 Hz, Abbruch unter 0,01 px; Fenstergröße per @property --lupe in 350 ms cubic-bezier(0.5, 0.1, 0.2, 1)",
   "chips": "Vorher/Nachher-Label blenden bei unter 22 % bzw. über 78 % in 150 ms aus",
   "projektwechsel": "Bilder aus 150 ms cubic-bezier(0.4, 0, 1, 1), ein 280 ms cubic-bezier(0.4, 0, 0.2, 1)",
   "ui": "Hover, Farbe, Unterstreichung 150 ms cubic-bezier(0.4, 0, 0.2, 1); Reiter-Markierung auf 280 ms, zu 200 ms",
   "aria": "aria-valuetext „X % Nachher sichtbar“, beide Bilder mit eigenem aria-label",
   "vorfuehrung": "gedachter Zeiger zieht 50 → 20 → 80 → 50 % (1400, 1900, 1200 ms, Kurve cubic-bezier(0.5, 0.1, 0.2, 1)), wechselt das Projekt, führt die Lupe 5,2 s in einer liegenden Acht"
  },
  "ausloeser": "ziehen",
  "touch": "Nur der Regler, großer Griff (Daumenfläche 44 px). touch-action pan-y: Vertikal scrollt die Seite weiter, nur der Griff zieht. Hover- und Lupen-Variante sind ausgeblendet. Untere Leiste mit Anrufen und Anfrage.",
  "reduziert": "Kein Gleiten nach Klick, die Grenze springt. Lupe ohne Nachlauf (Lerp 1) und ohne Wachsen. Projektwechsel tauscht die Bilder sofort. Die Vorführung springt zwischen festen Positionen statt zu ziehen.",
  "korrekturen": {
   "beschreibung": "Zwei deckungsgleiche Bilder liegen übereinander, etwa vorher und nachher, alt und neu, roh und bearbeitet. Ein senkrechter Regler mit Griff teilt die Fläche. Ziehen oder Pfeiltasten verschieben die Grenze, das obere Bild wird per clip-path beschnitten. In den Ecken stehen Labels für vorher und nachher, oft gibt es Reiter für mehrere Beispiele. Variante Lupe: Ein Fenster folgt dem Zeiger und zeigt dort die Nachher-Version.",
   "warum_es_wirkt": "Der Nutzer prüft den Unterschied selbst, statt ihn nur behauptet zu bekommen. Das überzeugt mehr als zwei Bilder nebeneinander. Die eigene Handbewegung macht die Verbesserung spürbar.",
   "wann_einsetzen": "Renovierung, Umbau und Architektur, Relaunch-Fallstudien (alte gegen neue Website), Retusche und Bildbearbeitung, Upscaling- und KI-Werkzeuge, Vergleiche von Farbe oder Theme.",
   "wann_nicht": "Wenn die Bilder nicht exakt deckungsgleich sind, denn Versatz zerstört den Effekt. Bei sehr kleinen Unterschieden ohne Zoom. Wenn das Ziehen auf Touch mit dem Scrollen der Seite kollidiert und das nicht sauber gelöst ist.",
   "varianten": [
    "Natives input type=range über dem Bild, nur der Griff ist greifbar (Clipdrop)",
    "Reiter für mehrere Beispiele mit Vorher/Nachher-Chips (upscale.media)",
    "Lupe: Fenster folgt dem Zeiger, clip-path inset(… round 12px), gelerpt (Topaz Labs)",
    "Hover: die Grenze folgt der Maus ohne Klick",
    "Waagerechte Teilung oder diagonaler Schnitt"
   ],
   "umsetzung": "Markup: figure mit zwei Bildern (beide grid-area 1/1) und einem input type=range. CSS: .nachher { clip-path: inset(0 0 0 var(--pos)) }, Trennlinie und Griff bei left: var(--pos). JS setzt nur --pos aus dem Wert des Reglers. Das Range-Input liegt über der ganzen Breite, transparent und mit pointer-events none; nur der Daumen bekommt pointer-events all. So bleiben Tastatur und Wertansage nativ. touch-action: pan-y am Container, damit die Seite auf Touch weiter scrollt. Lupe: Zeigerposition lerpen (0,15 bis 0,2) und als clip-path inset() mit round-Radius setzen. Beide Bilder exakt gleich groß exportieren.",
   "mobil": "Großer Griff mit mindestens 44 px Touch-Fläche und touch-action: pan-y. Die Lupe mobil durch den Regler ersetzen oder kleiner machen (Topaz teilt durch 1,5).",
   "reduzierte_bewegung": "Den Regler nicht automatisch hin und her animieren. Lupe ohne Nachlauf (Lerp 1).",
   "barrierefreiheit": "Natives input type=range mit aria-label und aria-valuetext (z. B. „60 % Nachher sichtbar“). Beide Bilder mit eigenem Alternativtext. Sichtbarer Fokus am Griff. Die Lupe ist nur Zusatz, der Inhalt bleibt ohne Maus erreichbar."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept handwerk-werkstatt-klartext (Signatur-Muster des Rezepts), erfundene Tischlerei Kleeschulte aus Paderborn. Die angefangene Demo (Kanzlei-Welt) ist umgebaut: Mechanik aus Regler, Hover und Lupe übernommen, Inhalte und Bildwelt neu. Drei Referenzen als Reiter (Küche im Riemekeviertel, Treppe in Schloß Neuhaus, Dachschräge in Wewer), jeweils zwei deckungsgleiche eigene SVG-Zeichnungen, dazu Bauzeit, Gewerke und Ab-Preis. Special Gothic, Atkinson Hyperlegible Next, Orange nur für Anfrage und Anruf, mobil untere Leiste. Referenzen nur als Prinzip: holzrausch.de, devolkitchens.co.uk, thermondo.de. AD-Review 01.11.2026: Note 4. Zugang 02.11.2026: --leise #5f5a53 → #57524c (4,9:1 auf --flaeche), Feld-Raster minmax(0, 1fr) gegen Querscrollen bei 320 px, Werte-Zeile unter 360 px umbrechend, Fokusrahmen am Vergleich bei fokussiertem Regler, Reiterliste aria-orientation vertical, Kontrastmodus-Rahmen für Knöpfe."
 }
}