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="http://www.adobewordpress.com/wp-content/uploads/2014/11/natalie-portman-nonStatue.jpg">
 <div id="ikincil">
 <figcaption>Before</figcaption>
 <img src="http://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);

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+"%";

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?

HTML5 ile Resimlere Before/After