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.
3 adet görselimizi ekledik. Hiyerarşi açısından en altta mordor, bir üstünde patlama ve en üstte de angmar class tanımlamalı görsel yer alacak.
JavaScript ve jQuery Tanımlamaları
İlk olarak inline JS kodlarımızı ekleyelim. İster elemanı içerisine, isterseniz de yukarıda eklediğimiz 3 görsel kodunun altına bu satırları ekliyoruz.
<script>
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. 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></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 : http://www.adobewordpress.com/css3-ile-odaklanma
