HTML5 ile Resimlere Before After

HTML5 ile resimlerinizin önceki ve sonraki hallerini gösterebilirsiniz. Bu işlemi range inputuyla süsleyerek kaydırma çubuğuyla before/after işlemi uygulayabiliyoruz.

Özellikle fotoğrafçılık ve fotoğraf manipülasyonu üzerine yayın yapan blog yazarları, bu makalemiz sizleri hedef alıyor. Makalenin devamına göz atmadan önce örneği görüntülemenizi öneririz.

ÖRNEĞİ GÖRÜNTÜLE

HTML5 ile Resimlerin Önceki ve Sonraki Halleri

Hazırlayacağımız yapı bir çerçevenin içerisine 2 adet fotoğraf veya resim yükleyerek, bunları hiyerarşik olarak sıralayıp, yeri geldiğinde kapatıp açabilecek. Bu yüzden bol bol pozisyonlama da yapmış olacağız. Özetle işin büyük bir kısmı yine CSS3 tarafında ilerleyecek.

HTML Kodları

İlk olarak .karsilastirma isimli tablo yapıda bir division oluşturalım. İçerisine de birinci görseli eklemek için figure, ikinci görseli eklemek için de #ikincil ismindeki division öğesini ekleyelim. Altına da range inputumuzu ekleyerek kaydırma işleminin temelini oluşturalım.

<div class="karsilastirma">
  <figure>
    <figcaption>After</figcaption>
    <img src="https://www.adobewordpress.com/wp-content/uploads/2014/11/natalie-portman-nonStatue.jpg">
    <div id="ikincil">
      <figcaption>Before</figcaption>
      <img src="https://www.adobewordpress.com/wp-content/uploads/2014/11/natalie-portman-Statue.jpg"></div>
  </figure>
  <input type="range" min="0" max="100" value="50" id="slide" oninput="kaydirma()">
</div>

Şimdi bu yapıya biraz stil katalım.

CSS Kodları

İlk olarak çerçevemizi tablo yapısına sokarak içerisindeki öğeler kadar büyümesini sağlayalım.

div.karsilastirma {display:table;margin:auto;}

Birinci görselimizi barındıracak figure ile devam edelim.

div.karsilastirma figure { 
  position: relative;
  font-size: 0;
  margin: 0; 
  overflow:hidden;
  z-index:1;
}

div.karsilastirma figure > img {position: relative; width: 100%;}

Şimdi de 50% genişlikte başlayacak ikinci görselin çerçevesini ekleyelim.

div.karsilastirma figure div { 
  position: absolute;
  width: 50%; 
  overflow: hidden; 
  bottom: 0; 
  height: 100%;
  z-index:4;
}

Şimdi de before ve after yazılarını ekleyelim.

div.karsilastirma figure > div > figcaption , 
div.karsilastirma figure > figcaption {
  position:absolute; 
  bottom:4px; 
  font: 300 18px sans-serif; 
  color:white;
}

div.karsilastirma figure > img {position: relative; width: 100%;}
div.karsilastirma figure > div > figcaption {left:8px; z-index:2;}
div.karsilastirma figure > figcaption {right:8px; z-index:3;}

Son olarak range inputumuzu stilize edelim.

input[type=range]{
  -webkit-appearance:none;
  -moz-appearance:none;
  position: relative;
  top: -30px; 
  left: -.4%;
  width: 100%;
  background-color: rgba(1,1,1,.1);
  z-index:5;
}

input[type=range]:focus {outline: none;}
input[type=range]:active {outline: none;}

input[type=range]::-moz-range-track { 
	 -moz-appearance:none;
    width: 98%;
    background-color: rgba(1,1,1,.1); 
    position: relative;
    outline: none;    
 }

input[type=range]::active {border: none; outline: none;}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance:none;
    position: relative;border-radius:100%;
    width: 25px; height: 25px; background:white;
    border-radius:100%;
}
input[type=range]:focus::-webkit-slider-thumb {
    background: rgba(255,255,255,.5);
}
input[type=range]:focus::-moz-range-thumb {
    background: rgba(255,255,255,.5);
}

HTML5 before after stilimiz hazır.

JavaScript Kodları

Son olarak ikinci öğenin genişliğini takip edecek ve sliderı bu yapıyla ilişkilendirecek bir JavaScript koduna ihtiyaç duyuyoruz.

function kaydirma() { 
    document.getElementById("ikincil").style.width = document.getElementById("slide").value+"%";
}

HTML5 before after fonksiyonlarımız hazır.

Yorumlarınız

HTML5 ve CSS3 ile hazırlayıp JavaScript ile fonksiyonel hale getirdiğimiz Before/After yapısıyla ilgili neler düşünüyorsunuz?