Vorher Nachher Bildvergleich
Zieh die Mittellinie, um zwei Versionen eines Bildes zu vergleichen; klappt mit Pfeiltasten und auf Touchscreens.
Einstellungen
Code
<div class="uv-mba"><div class="im a" aria-hidden="true"><svg viewBox="0 0 320 200" preserveAspectRatio="xMidYMid slice"><ellipse cx="70" cy="45" rx="34" ry="10" fill="#fff" opacity=".85"/><ellipse cx="150" cy="30" rx="24" ry="7" fill="#fff" opacity=".7"/><circle cx="240" cy="62" r="22" fill="#fde047"/><path d="M0 120C40 95 80 100 120 110S200 80 250 95 300 105 320 100V200H0Z" fill="#65a30d"/><path d="M0 150C50 120 110 140 160 135S260 120 320 140V200H0Z" fill="#3f6212"/><ellipse cx="205" cy="178" rx="92" ry="13" fill="#38bdf8"/><rect x="70" y="116" width="4" height="22" fill="#422006"/><circle cx="72" cy="110" r="13" fill="#166534"/><rect x="246" y="126" width="26" height="18" fill="#f8fafc"/><path d="M242 128l17-12 17 12z" fill="#dc2626"/></svg></div><div class="im b" aria-hidden="true"><svg viewBox="0 0 320 200" preserveAspectRatio="xMidYMid slice"><ellipse cx="70" cy="45" rx="34" ry="10" fill="#fff" opacity=".85"/><ellipse cx="150" cy="30" rx="24" ry="7" fill="#fff" opacity=".7"/><circle cx="240" cy="62" r="22" fill="#fde047"/><path d="M0 120C40 95 80 100 120 110S200 80 250 95 300 105 320 100V200H0Z" fill="#65a30d"/><path d="M0 150C50 120 110 140 160 135S260 120 320 140V200H0Z" fill="#3f6212"/><ellipse cx="205" cy="178" rx="92" ry="13" fill="#38bdf8"/><rect x="70" y="116" width="4" height="22" fill="#422006"/><circle cx="72" cy="110" r="13" fill="#166534"/><rect x="246" y="126" width="26" height="18" fill="#f8fafc"/><path d="M242 128l17-12 17 12z" fill="#dc2626"/></svg></div><span class="tg l" aria-hidden="true">Vorher</span><span class="tg r" aria-hidden="true">Nachher</span><i class="hd" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l-5 6 5 6M15 6l5 6-5 6"/></svg></i><input type="range" min="0" max="100" step="0.1" value="50" aria-label="Vorher und nachher vergleichen"></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Mikrointeraktionen
Alle ansehen: MikrointeraktionenWofür du ihn nutzen kannst
Fotografen, Retuscheure und Sanierungsfirmen zeigen mit diesem Regler ihre Arbeit. Links liegt eine matte, ausgewaschene Fassung einer Landschaft, rechts die lebendige Bearbeitung, getrennt durch eine Linie mit rundem Griff. Ein kurzer Schwenk beim Erscheinen deutet an, dass man die Linie ziehen kann, und Etiketten markieren beide Seiten.
Ein unsichtbarer nativer Range Regler liegt über dem ganzen Bild, daher bewegen Ziehen an jeder Stelle, Tippen oder Pfeiltasten die Trennlinie barrierefrei. Ersetze die gezeichnete Szene durch zwei echte Fotos mit gleichem Ausschnitt.