CSS3 ile Odaklanma

Tolkien, Yüzüklerin Efendisi ve Hobbit filmlerine, hatta oyunlarına ilgi duyan herkesin hoşuna gideceğini düşündüğümüz bir tasarım ile sizlerleyiz. Bu dersimizde CSS3‘ün transform elemanıyla jQuery‘nin gücünü birleştirip etkileyici bir sunum hazırlayacağız. Bu yüzden okumakta olduğunuz makale aynı zamanda da “İlham Verenler” kategorisinde yerini alıyor.

Nasıl yapılır?

Tasarımın hazırlamasında kullandığımız CSS, HTML ve JS kodlarını teker teker inceleyelim.

HTML Kodları

Birçok makalemizin aksine bu sefer işin HTML kısmıyla başlayalım. İlk olarak 3 adet katmanımızı ekleyelim. Bu rakamı kod satırlarını çoğaltarak arttırabilirsiniz de.

<div class="katmanlar">
<img src="http://i.imgur.com/ePE90Yv.png" class="mordor">
<img src="http://i.imgur.com/BamhAMD.png" class="patlama">
<img src="http://i.imgur.com/SCLnCIg.png" class="angmar">
</div>

3 adet görselimizi ekledik. Hiyerarşi açısından en altta mordor, bir üstünde patlama ve en üstte deangmar class tanımlamalı görsel yer alacak.

JavaScript ve jQuery Tanımlamaları

İlk olarak inline JS kodlarımızı ekleyelim. İster <head></head> elemanı içerisine, isterseniz de yukarıda eklediğimiz 3 görsel kodunun altına bu satırları ekliyoruz.

<script type="text/javascript">
var mouseY = 0;
 
getBlur = function(depth){
  var result = Math.abs(depth-mouseY/50);
  return result;
};
 
getZoom = function(depth){
  var result =  1+(getBlur(depth/2)*0.03);
  return result;
};
 
$(document).ready(function() {
  $(window).mousemove(function(e){
    mouseY = e.pageY;
    /*'-webkit-transform: scale('+ getZoom(2)+') perspective(100px);*/
    $('.mordor').attr('style','-webkit-filter:blur('+getBlur(2)+'px);');
    $('.patlama').attr('style','-webkit-filter:blur('+getBlur(3)+'px);');
    $('.angmar').attr('style','-webkit-filter:blur('+getBlur(5)+'px);');
  });
 
});
</script>

Şimdi de jQuery dosyasını sayfamıza ekleyelim. <head></head> içerisine jQuery tanımlamasını yapıyoruz. Örneği hazırlarken 1.10.1.min versiyonunu kullanmıştık, burada da onu paylaşmakta fayda var.

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

CSS Kodları

Fark ettiğiniz gibi hazırladığımız örnek tam ekran olarak çalışmakta. Yani responsive, makalede de aynı tasarımı uygulayacağız. O halde aşağıdaki kodları CSS dosyanıza ekleyerek işlemi tamamlayabilirsiniz.

body,html {
    height: 100%;
    margin:0;
    background-color:black;
}
.katmanlar {
    position:absolute;
    margin: 0 auto;
    height: 100%;
    width:100%;
    overflow:hidden;
      -webkit-transform-style: preserve-3d;
}
img {
  -webkit-transform: translate3d(0, 0, 0);
  width:100%;
  height:100%;
}
.katmanlar .angmar {
  position:absolute;
  top:0px;
  left:0px;
}
 
.katmanlar .patlama {
  position:absolute;
  top:0px;
  left:0px;
}

Kapanış

Bu tip tasarımlar daha çok ürün tanıtımında kullanılmakta. CodePen üzerinde görüp sizlerle Türkçe olarak paylaştığımız bu ders aslında kod temelli tasarımın ne kadar hızlı geliştiğini açıkça göstermekte. Adobewordpress ailesi olarak bu yenilikleri sık sık gündeme getirmeye devam edeceğiz.

Bir sonraki dersimizde görüşmek üzere, iyi çalışmalar.

Kaynak: Adobewordpress