Porównanie zdjęć przed i po na własnej stronie – efekt before after

Znajomy poprosił mnie niedawno o pomoc w umieszczeniu na jego stronie zdjęć, ale w taki sposób, który pozwolił by na porównanie zdjęć przed i po zmianach związanych z wykonaną usługą kosmetyki samochodowej tzw. “car spa”. Okazuje się, że to dość proste zadanie z wykorzystaniem HTML i CSS oraz niewielkiej porcji JavaScript. Co więcej, jest już mnóstwo przykładowych rozwiązań tego problemu. Nie wyważając już otwartych drzwi, wybrałem najprostszy, bo korzystający z podstawowych funkcji i niepotrzebujący żadnych dodatkowych bibliotek przykład, którym tutaj się podzielę.

Jak to w ogóle działa?

Jeśli nie widziałeś jeszcze takiej porównywarki i zastanawiasz się, jak to działa, zobacz ten przykład. Fajne, prawda!? Co zatem będziesz potrzebować, aby umieścić na swojej stronie taki efekt? Niewiele. Po pierwsze edytor HTML, np. mój Pajączek, trochę samozaparcia i gotowe.

Jak już wspomniałem na początku potrzebne nam będą trzy elementy składowe: HTML do opisu struktury strony, CSS do określenia wyglądu oraz JavaScript do oprogramowania funkcji paska przesuwu wyświetlającego zdjęcia przed i po. Do stworzenia tego efektu skorzystam z przykładu autorstwa Huw Llewellyn. Bezpośredni link do pobrania kodu źródłowego znajdziesz na końcu artykułu.

Tworzymy porównanie zdjęć przed i po

Kod HTML potrzebny do utworzenia efektu wygląda następująco:

<div id="page">
<div class="wrapper">
  <div class="before">
    <img class="content-image" src="https://farm2.staticflickr.com/1638/26145024230_06acd55d1b_b.jpg" draggable="false"/>   </div>
  <div class="after">
    <img class="content-image" src="https://farm2.staticflickr.com/1663/25814974803_d4c55ff708_b.jpg" draggable="false"/>
  </div>
  <div class="scroller">
    <svg class="scroller__thumb" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><polygon points="0 50 37 68 37 32 0 50" style="fill:#fff"/><polygon points="100 50 64 32 64 68 100 50" style="fill:#fff"/></svg>
  </div>
</div>
</div>

Z Twojego punktu widzenia istotne będą znaczniki img, które wskazują na obrazki przed i po zmianach. Umieść tam odsyłacz do swoich obrazków. Znacznik o klasie scroller to z kolei definicja wyglądu paska przesuwu, do wybierania widoczności zdjęcia.

Uwaga! Powyższy kod HTML nie zawiera odsyłaczy do definicji CSS oraz JavaScript. Pamiętaj, aby je dodać w dokumencie lub zewnętrznych plikach i powiązać z podstawowym plikiem HTML.

CSS, czyli wygląd

Kod CSS definiuje wygląd poszczególnych części strony porównywarki:

/* You can remove this page div in your website */
#page{
  width:100%;
  height:100%;
  position:absolute;
}

/* Our normalize css */
*{
  margin:0;
  box-sizing: border-box;
}

/* Our wrapper */
.wrapper{
  width: 900px;
  height: 600px;
  position: absolute;
  left:50%;
  top:50%;
  transform:translate3d(-50%,-50%,0);
  overflow:hidden;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

/* Our image information */
.before,
.after {
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-color: white;
  background-size: cover;
  background-position: center;
  position: absolute;
  top:0;
  left:0;
  pointer-events:none;
  overflow: hidden;
}

.content-image{
  height:100%;
}

.after{
  width:125px;
}

.scroller{
  width: 50px;
  height:50px;
  position: absolute;
  left:100px;
  top:50%;
  transform:translateY(-50%);
  border-radius:50%;
  background-color: transparent;
  opacity:0.9;
  pointer-events:auto;
  cursor: pointer;
}

.scroller:hover{
  opacity:1;
}

.scrolling{
  pointer-events:none;
  opacity:1;
  // z-index: 1;
}

.scroller__thumb{
  width:100%;
  height:100%;
  padding:5px;
}

.scroller:before,
.scroller:after{
  content:" ";
  display: block;
  width: 7px;
  height: 9999px;
  position: absolute;
  left: 50%;
  margin-left: -3.5px;
  z-index: 30;
  transition:0.1s;
}
.scroller:before{
  top:100%;
}
.scroller:after{
  bottom:100%;
}

/* If you want to cahnge the colors, make sure you change the fill in the svgs to match */
.scroller{
  border: 5px solid #fff;
}
.scroller:before,
.scroller:after{
  background: #fff;
}

Sterowanie tym wszystkim

Na koniec wystarczy dodać kod JavaScript, który tchnie życie w zaprojektowaną stronę i gotowe. Można cieszyć się efektem. Oto ten kod:

// I hope this over-commenting helps. Let's do this!
// Let's use the 'active' variable to let us know when we're using it
let active = false;

// First we'll have to set up our event listeners
// We want to watch for clicks on our scroller
document.querySelector('.scroller').addEventListener('mousedown',function(){
  active = true;
  // Add our scrolling class so the scroller has full opacity while active
  document.querySelector('.scroller').classList.add('scrolling');
});
// We also want to watch the body for changes to the state,
// like moving around and releasing the click
// so let's set up our event listeners
document.body.addEventListener('mouseup',function(){
  active = false;
  document.querySelector('.scroller').classList.remove('scrolling');
});
document.body.addEventListener('mouseleave',function(){
  active = false;
  document.querySelector('.scroller').classList.remove('scrolling');
});

// Let's figure out where their mouse is at
document.body.addEventListener('mousemove',function(e){
  if (!active) return;
  // Their mouse is here...
  let x = e.pageX;
  // but we want it relative to our wrapper
  x -= document.querySelector('.wrapper').getBoundingClientRect().left;
  // Okay let's change our state
  scrollIt(x);
});

// Let's use this function
function scrollIt(x){
    let transform = Math.max(0,(Math.min(x,document.querySelector('.wrapper').offsetWidth)));
    document.querySelector('.after').style.width = transform+"px";
    document.querySelector('.scroller').style.left = transform-25+"px";
}

// Let's set our opening state based off the width, 
// we want to show a bit of both images so the user can see what's going on
scrollIt(150);

// And finally let's repeat the process for touch events
// first our middle scroller...
document.querySelector('.scroller').addEventListener('touchstart',function(){
  active = true;
  document.querySelector('.scroller').classList.add('scrolling');
});
document.body.addEventListener('touchend',function(){
  active = false;
  document.querySelector('.scroller').classList.remove('scrolling');
});
document.body.addEventListener('touchcancel',function(){
  active = false;
  document.querySelector('.scroller').classList.remove('scrolling');
});

Jak widać autor opatrzył swój kod licznymi komentarzami, które z pewnością ułatwią zrozumienie jego działania. Dzięki wykorzystaniu podstawowych funkcji oferowanych przez HTML, CSS i JavaScript nie było potrzebne korzystanie z żadnych dodatkowych bibliotek, co doskonale wpływa na szybkość działania takiej strony.

Połączenie wszystkiego razem

Skoro mamy cały kod, trzeba to wszystko jeszcze połączyć razem. Można zatem utworzyć dokument HTML i dodać fragment ze stylami CSS w sekcji HEAD pomiędzy znacznikami STYLE, a JavaScript na końcu dokumentu pomiędzy znacznikami SCRIPT. Jednak chyba lepszym sposobem jest użycie zewnętrznych plików CSS oraz JS, aby nie zaciemniać kodu HTML. W związku z tym proponuję oprócz pliku HTML, utworzyć także pliki style.css oraz skrypt.js. W pierwszym umieścić powyższy kod CSS, a w drugim kod JS. Następnie w pliku HTML dołączamy oba pliki w następujący sposób. Dla pliku CSS w sekcji HEAD dokumentu HTML dodajemy:

<link rel="stylesheet" href="style.css">

a kod JavaScript dołączamy przez utworzony plik skryptu:

<script src="skrypt.js"></script>

Co istotne, dołączenie skryptu powinno znaleźć się na końcu dokumentu. Najlepiej przed zamykającym znacznikiem BODY, dzięki czemu będziemy mieć pewność, że w momencie jego uruchomienia skrypt będzie miał już dostęp do elementów strony. Zatem na koniec jeszcze raz sprawdźmy przykład.

Pliki do pobrania

Skrypt został stworzony przez Huw Llewellyn i jest dostępny bezpłatnie w autorskim codepen’ie. Plik ZIP ze wszystkimi plikami źródłowymi oraz demo można pobrać z naszego serwera.