Utwórz projekt ↗
CSS / JS · KOD NA LICENCJI MIT

Porównanie przed i po

Przesuń suwak i odkryj różnicę.

Edytuj HTML, CSS i JS ↗ Otwórz konfigurator ↗

Gdzie wykorzystać ten przykład?

Elementy strony dopasowane do własnego projektu. Wariant „Porównanie przed i po” możesz dopasować do kolorów i treści swojej strony.

Jak działa ten efekt?

HTML określa strukturę przykładu, CSS jego wygląd, a JavaScript — jeżeli występuje — odpowiada za interakcję. Podgląd pokazuje domyślne ustawienia, które możesz zmienić w edytorze.

Jak dodać go na stronę?

  1. Otwórz przykład w edytorze i podmień tekst oraz kolory.
  2. HTML wstaw w miejscu, w którym ma pojawić się element.
  3. CSS przenieś do arkusza stylów swojej strony. Reguły body z podglądu dopasuj do własnego układu.
  4. JavaScript uruchom po załadowaniu elementów HTML, na przykład przed zamknięciem </body>.
  5. Sprawdź działanie na telefonie, klawiaturą i z własną treścią.

Na co zwrócić uwagę?

Podmień treści i odnośniki. Kod działa w przeglądarce; formularze wymagają osobnej obsługi wysyłania po stronie serwera.

Co możesz zmienić w konfiguratorze?

Etykieta przed, Etykieta po, Pozycja startowa, Kolor akcentu. W edytorze kodu możesz dodatkowo zmienić całą strukturę i zachowanie przykładu.

Gotowy kod: Porównanie przed i po

HTML

<div class="compare"><div class="before"><span>Przed</span></div><div class="after"><span>Po</span></div><div class="line" aria-hidden="true">↔</div><input type="range" min="0" max="100" value="50" aria-label="Przesuń granicę porównania"></div>

CSS

*{box-sizing:border-box}body{margin:0;padding:35px 24px;background:#f4f5ef;color:#293322;font:15px/1.7 Arial,sans-serif;min-height:100vh;display:grid;place-items:center}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #738858;outline-offset:4px}h2,h3,p{margin-top:0}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.compare{position:relative;width:100%;max-width:650px;height:260px;border-radius:12px;overflow:hidden}.compare .before,.compare .after{position:absolute;inset:0;display:grid;place-items:center}.compare .before{background:linear-gradient(135deg,#b9c6ac,#6f8062);filter:grayscale(1)}.compare .after{background:linear-gradient(135deg,#e95b30,#efd486);clip-path:inset(0 50% 0 0)}.compare span{color:white;font-size:38px;font-weight:bold}.compare .line{position:absolute;left:50%;top:0;height:100%;width:3px;background:white;display:flex;align-items:center;justify-content:center;color:#293923;font-size:22px;pointer-events:none}.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize}.compare:focus-within{outline:3px solid #e95b30;outline-offset:4px}

JavaScript

const comparison=document.querySelector('.compare');
comparison.querySelector('input').addEventListener('input',e=>{
    comparison.querySelector('.after').style.clipPath='inset(0 '+(100-e.target.value)+'% 0 0)';
    comparison.querySelector('.line').style.left=e.target.value+'%';
});

Podobne przykłady

Menu z wysuwanym panelem ↗FAQ bez dodatkowych bibliotek ↗Przycisk z efektem hover ↗Lekka karuzela ↗Zakładki z treścią ↗Okno modalne ↗