Sihirli Fasulyeler
Yükleniyor...
CSS ile 3 Boyutlu Yapılar Oluşturma - 3
 Web-Tasarım   1049   16.11.17   22.10.19   0
csssayfa3d.jpg

Bu makalemde, CSS ile 3 boyut özelliğine sahip sayfalar oluşturup, sayfalar arasındaki geçişleri 3 boyutlu olmasını sağlayacağız. Aslında yapacağımız işlemler oldukça basit. CSS "translateZ" komutu ile sayfaları plakalar şeklinde birbirinin önünde veya arkasında sıralayacağız ve sayfa geçişlerinde Z ekseni üzerinde taşıma işlemi yaparak güzel bir efekt de elde etmiş olacağız. Oluşturacağımız uygulamamızı aşağıda inceleyebilirsiniz.

 

1/5

 

Önce Eru vardı, Tek Olan, Arda'da Ilûvatar diye isimlendirilen; ve ilk önce düşüncesinden doğurduğu Ainur'u, Kutsal Olanlar'ı yarattı ve onlar, hiçbir şey yaratılmadan önce onunlaydılar. Müziğin temalarını oluşturarak onlarla konuştu; ve onlar Eru'nun huzurunda şarkı söylediler ve o mutlu oldu. Uzun bir süre boyunca her biri sadece kendi başına ya da birkaçı bir arada şarkı söylerken geri kalanı dinledi; çünkü her biri, Ilûvatar'ın düşüncelerinin sadece kendi doğdukları kısmını kavramıştı, zamanla birbirlerini anlayışları gelişti, ama yavaş yavaş. Yine de dinledikçe daha derinden anlamaya başladılar, birlik ve uyum çoğaldı. Ve an geldi, Ilûvatar, Ainur'u bir araya toplayıp şimdiye dek açıkladıklarından daha büyük, daha harika şeyleri gözlerinin önüne sererek, çok daha kudretli bir tema bildirdi; temanın başlangıcının ihtişamı ve bitişinin görkemi Ainur'u şaşkınlık içinde bıraktı böylece Ilûvatar'ın huzurunda eğildiler ve sessiz kaldılar. Sonra Ilûvatar onlara dedi ki: "Size bildirdiğim temadan, birlikte uyum içinde bir Ulu Müzik yapmanızı istiyorum. Ve sizi Yokolma-yan Alevle canlandırdığım için, eğer yapabilirseniz her biriniz kendi düşünceleriniz ve aklınızla bu temayı donatmak için güçlerinizi göstereceksiniz. Ama ben oturup dinleyeceğim ve sizin sayenizde büyük güzelliğin şarkıda uyandırılışıyla mutlu olacağım." Ainur sesleri, arplar, udlar, borular, trompetler, viyollar ve orglar gibi, sözcüklerle şarkı söyleyen sayısız korolar gibi Ilûvatar'ın temasını ulu bir müziğe dönüştürmeye başladı; derinliklerde ve yücelerde işitilmenin ötesine geçip uyum içinde örülerek sonsuz sayıda çeşitlenen

2/5

 

melodilerden oluşan bir ses yükseldi ve Ilûvatar'ın yaşadığı yerler dolup taştı, müzik ve müziğin yankısı Boşluk'a ulaştı ve orası artık boş değildi. Ainur bir daha asla bunun gibi bir müzik yapamadılar; günlerin bitiminin ardından Ainur koroları ve Ilüvatar'ın Çocukları tarafından Ilüvatar'ın huzurunda daha ulu bir müzik yapılacağı söylenmesine rağmen. Ilüvatar'ın temaları kusursuz bir şekilde işlenecek ve söyleyişleri anında Varlık oluşacaktı, çünkü hepsi o zaman onun düşüncelerinde kendilerinin doğdukları kısmını bütünüyle anlayacak ve her biri, diğerlerinin anlayışını bilecek, Ilûvatar mutlu olup onların düşüncelerine gizli ateşi verecekti. Ilûvatar oturup dinledi, uzun süre boyunca bu ona iyi gözüktü çünkü müzikte kusur yoktu. Ama tema geliştikçe, Melkor'un yüreğine, Ilüvatar'ın temasıyla uyum içinde olmayan kendi imgeleminin birbiri içine girmiş özleri ulaşmaya başladı; çünkü o, müziğin kendisine ayrılan kısmının gücünü ve görkemini artırmaya uğraşıyordu. Ainur içinde en büyük güç ve bilgi ihsanları Melkor'a verilmişti ve kardeşlerine verilen tüm ihsanların içinde bir payı vardı. Sık sık Yokolmayan Alev'i aramak için tek başına boşluğa gitmişti; çünkü içindeki Varlık unsurlarını kendisine ait kılmak için duyduğu arzu büyümüştü ve ona sanki Ilüvatar'ın Boşluk hakkında hiçbir düşüncesi yokmuş gibi geliyordu ve bunun boşluğu yüzünden sabırsızlığa kapılıyordu. Ancak Alev'i bulamadı, çünkü o Ilûvatar'laydı. Ama kardeşlerininkine pek benzemeyen kendi düşüncelerini tek başına tasarlamaya başlamıştı.

3/5

 

Bu düşüncelerden bazılarını müziğine dokudu ve hemen etrafında bir ahenksizlik yükseldi, çevresinde şarkı söyleyenlerin çoğu ümitsizliğe düştü, düşünceleri alt üst oldu, müzikleri durakladı; ama bazıları, müziklerini başlangıçtaki düşünceden çok ona uyum sağlamaya yöneltti. Sonra Melkor'un ahenksizliği daha da yayıldı ve daha önce duyulmuş melodiler, çalkantılı bir ses denizinde battı. Ama Ilûvatar, sanki yatıştırılamayacak sonsuz bir öfke içindeki karanlık suların birbirleriyle savaştığı o köpüren fırtına, tahtının etrafında gözükene dek oturup dinledi.

4/5

 

Sonra Ilûvatar ayağa kalktı, Ainur onun gülümsediğini fark etti; ve sol elini kaldırdı, önceki gibi ama ona pek benzemeyen yeni bir tema fırtınanın ortasında başlayıp güçlendi, yeni bir güzelliği vardı. Ama Melkor'un ahenksizliği gürültüyle yükselip onunla mücadele etti, Ainu'ların çoğu dehşete düşüp artık daha fazla şarkı söyleyemez hale gelene dek, öncekinden daha şiddetli yeni bir ses savaşı başladı ve Melkor duruma hakim oldu. Sonra Ilûvatar yeniden ayağa kalktı, Ainur onun çehresinin artık sertleştiğini fark etti; sağ elini kaldırdı ve işte! üçüncü bir tema kargaşanın ortasında büyüdü, diğerlerine benzemiyordu. Çünkü başta yumuşak ve tatlı gözüktü, narin melodilerin içinde tatlı seslerin saf bir dalgalanması gibiydi; ama yatıştırıla-madı, kendine güç ve derinlik kazandırdı. Ve sonunda Ilûvatar'ın huzurunda aynı anda iki müzik gelişiyor gibiydi, tamamen uyumsuzluk içindeydiler. Birisi, derin, geniş ve güzeldi, ama yavaş ve sınırsız bir hüzünle karışmıştı ki güzelliği en çok bundan kaynaklanıyordu. Diğeri, artık kendi birliğini kazanmıştı; ama gürültülüydü, anlamsızdı, durmadan tekrarlanıyordu; ve çok az ahenk vardı, daha çok sanki bir sürü trompet birkaç nota üzerine bağınyormuş gibi gürültülü bir ahenk. Ve diğer müziği kendi sesinin şiddetiyle boğmaya kalkıştı, ama en güçlü notaları diğeri tarafından alınarak kendi görkemli yapısına işleniyor gibiydi.

5/5

 

Bu çekişmenin ortasında, Ilûvatar'ın salonları sarsılır ve bir ürper-me henüz hareketsiz sessizliklere doğru akarken, Ilûvatar üçüncü kez ayağa kalktı; yüzü artık bakılamayacak kadar korkunçtu. Sonra her iki elini kaldırdı, Dipsiz Derinlikler'den daha derin, Sema'dan daha yüksek ve Ilûvatar'ın gözündeki ışık gibi delip geçici bir akorla Müzik kesildi. Sonra Ilûvatar konuştu ve dedi ki: "Ainur güçlüdür ve aralarında en güçlüsü Melkor'dur; ama o ve tüm Ainur bilir ki ben Ilûvatar'ım,

 

JR Tolkien - Silmarillion'dan

 

Öncelikle HTML yapımızı oluşturmakla başlayalım. Yapımızda perspektif değerini ayarlamak ve hizalama kontrolü için "temel" isimli bir katman oluşturuyoruz. Sayfa geçişleri için 2 butonumuz, hangi sayfada olduğumuzu anlamak için (kullanıcıya gösterilmeyecek) bir input elemanımız mevcut. Elbetteki sayfalar için bir kaç katman da tanımlamamız gerekiyor. Beş adet sayfa, bu uygulama için herhalde yeterli olur.

 
<div id="temel">
	<button id="ileri">›</button>
	<button id="geri">‹</button>
	<input type="text" name="" id="kontrol" value="1" />
	<div id="sayfa1" class="sayfa"><h1>1/5</h1><p>yazılar</p></div>
	<div id="sayfa2" class="sayfa"><h1>2/5</h1><p>yazılar</p></div>
	<div id="sayfa3" class="sayfa"><h1>3/5</h1><p>yazılar</p></div>
	<div id="sayfa4" class="sayfa"><h1>4/5</h1><p>yazılar</p></div>
	<div id="sayfa5" class="sayfa"><h1>5/5</h1><p>yazılar</p></div>
</div>
 

CSS işlemlerimizi yapalım. Öncelikle bütün elemanlarımızı kapsayan "temel" isimli katmanımız ile perpektifi, yani görüntünün ekrandan olan uzaklığını ayarlamamız gerekiyor. Daha sonra sayfalarımızı bağımsızca hareket ettirmek için pozisyon değerlerini "absolute" yapıyoruz. Geri kalan CSS işlemleri ile çerçeve, hizalama, renk, font gibi ayarlamaları yapıyoruz.

 
#temel{
    perspective:3000px;
    width: 100%;
    height: 375px;
    border:5px solid #666;
}

.sayfa{
    transition:all 1s ease;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    overflow-y: scroll;
    background: #f8f8f8;
    font-family: "Arial";
    font-size: 15px;
}

.sayfa>h1{
    display: block;
    text-align: right;
}

#ileri, #geri{
    position: absolute;
    width: 50px;
    height: 50px;
    top:0;
    z-index: 99;
    text-align: center;
    font-family: "Arial";
    font-size: 30px;
    font-weight: bold;
    outline: none;
    border:4px solid #ccc;
}

#ileri{left: 60px;}
#geri{left:0px;}

#kontrol{
    position: absolute;
    top:-40px;
    display: none;
}

@media(max-width: 600px){#temel{width: 100%;height: 400px;}}
 

Bu uygulamamızda işleri kolaylaştırmak için CSS işlemlerini JQuery ile yapacağız. Eğer JQuery kullanmasaydık, her sayfa için bir HTML "label" elemanı ve her label elemanı için de HTML "input radio" elemanı eklememiz gerekir, kodlamamız uzardı. Ayrıca sayfaları hizalandırmada zorluk çekebilirdik. Bu yüzden CSS işlemlerini JQuery üzerinden kolaylıkla yapacağız.

 

JQuery kısmında, öncelikle bir fonksiyon oluşturalım. Bu fonksiyon ile hangi sayfadaysak ona göre CSS işlemleri yapılacak. 3 boyutlu bir efekt istediğimizden sayfalarımızı Z ekseni üzerinde taşıma işlemi yapacağız. Dilerseniz önce fonksiyonumuzu oluşturalım.

 
function degis(sayfa){
 if (sayfa=="1"){
    $("#sayfa1").css({"opacity":"1","transform":"translate3d(0,0,0)"});
    $("#sayfa2").css({"opacity":"0","transform":"translate3d(0,0,-3000px)"});
    $("#sayfa3").css({"opacity":"0","transform":"translate3d(0,0,-6000px)"});
    $("#sayfa4").css({"opacity":"0","transform":"translate3d(0,0,-9000px)"});
    $("#sayfa5").css({"opacity":"0","transform":"translate3d(0,0,-12000px)"});
 }

 if (sayfa=="2"){
    $("#sayfa1").css({"opacity":"0","transform":"translate3d(0,0,3000px)"});
    $("#sayfa2").css({"opacity":"1","transform":"translate3d(0,0,0px)"});
    $("#sayfa3").css({"opacity":"0","transform":"translate3d(0,0,-3000px)"});
    $("#sayfa4").css({"opacity":"0","transform":"translate3d(0,0,-6000px)"});
    $("#sayfa5").css({"opacity":"0","transform":"translate3d(0,0,-9000px)"});
 }

 if (sayfa=="3"){
    $("#sayfa1").css({"opacity":"0","transform":"translate3d(0,0,6000px)"});
    $("#sayfa2").css({"opacity":"0","transform":"translate3d(0,0,3000px)"});
    $("#sayfa3").css({"opacity":"1","transform":"translate3d(0,0,0px)"});
    $("#sayfa4").css({"opacity":"0","transform":"translate3d(0,0,-3000px)"});
    $("#sayfa5").css({"opacity":"0","transform":"translate3d(0,0,-6000px)"});
 }

 if (sayfa=="4"){
    $("#sayfa1").css({"opacity":"0","transform":"translate3d(0,0,9000px)"});
    $("#sayfa2").css({"opacity":"0","transform":"translate3d(0,0,6000px)"});
    $("#sayfa3").css({"opacity":"0","transform":"translate3d(0,0,3000px)"});
    $("#sayfa4").css({"opacity":"1","transform":"translate3d(0,0,0px)"});
    $("#sayfa5").css({"opacity":"0","transform":"translate3d(0,0,-3000px)"});
 }

 if (sayfa=="5"){
    $("#sayfa1").css({"opacity":"0","transform":"translate3d(0,0,12000px)"});
    $("#sayfa2").css({"opacity":"0","transform":"translate3d(0,0,9000px)"});
    $("#sayfa3").css({"opacity":"0","transform":"translate3d(0,0,6000px)"});
    $("#sayfa4").css({"opacity":"0","transform":"translate3d(0,0,3000px)"});
    $("#sayfa5").css({"opacity":"1","transform":"translate3d(0,0,0px)"});
 }
}

degis(1);
 

Öncelikle sayfa ilk açıldığında "degis(1);" komutu ile fonksiyonumuz 1. sayfa için çalışacak. Yani 1. sayfamızın Z ekseni üzerindeki değeri sıfır olacak. Fakat diğer sayfaların Z ekseni üzerindeki konumları aşama aşama 3000 piksel azaltılarak oluşturulacak. Böylece sayfaları plakalar şeklinde hizalayabileceğiz. Aiağıdaki resimde sayfa açılışındaki ilk ayarlamayı görebilirsiniz. İlk sayfa en önde olduğu için ve diğer sayfaların saydamlık (opacity) değerleri sıfır olduğu için, diğer sayfalar gözükmeyecek.

  CSS - 3D Sayfa Geçişi  

Kullanıcı ilk sayfadayken ileri butonuna basarsa, sayfaların Z ekseni üzerindeki değerleri 3000 piksel artırılacak. Böylece 1. sayfa ekranın dışına çıkacak ve 2. sayfa ekranda yer alacak. Sistemimiz böyle çalışacak.

  CSS - 3D Sayfa Geçişi  

Gelelim HTML ile eklediğimiz butonların davranışlarına : Kullanıcı butonlara tıkladığı zaman, HTML kısmında yapımıza eklediğimiz ve kullanıcıya göstermediğimiz input elemanındaki değer, tıklanan butona göre değişecek. Kullanıcı ileri butonuna tıkladıysa bu değer 1 artıralacak, geri butonuna tıkladıysa 1 azaltılacak. Bu sayede hangi sayfayı ekrana getirmemiz gerektiğini bileceğiz. Bir nevi uygulamanın haritası diyebiliriz. Elbetteki ilk ve son sayfalar için bazı kontrolleri yapmamız gerekiyor. Yani kullanıcı son sayfadaysa ve ileri butonuna basarsa input elemanımızın değeri değiştirilmeyecek. Şimdi gerekli komutlarımızı yazalım.

 
$("#ileri").on("click",function(){
 var kontrol = $("#kontrol").val();
 if (kontrol!=5){
  kontrol = parseInt(kontrol) + 1;
  $("#kontrol").val(kontrol);
 }
 degis(kontrol);
});

$("#geri").on("click",function(){
 var kontrol = $("#kontrol").val();
 if (kontrol!=1){
  kontrol = parseInt(kontrol) - 1;
  $("#kontrol").val(kontrol);
 }
 degis(kontrol)
});
 

Böylece kullanıcı ileri veya geri butonuna tıklarsa, input değeri, tıklanan butona göre değiştirilecek ve yazdığımız fonksiyon ile sayfalar için CSS işlemleri yapılacak. Bu işlemler daha önce de belirttiğim gibi, sayfaların Z ekseninde taşınmasını sağlayarak 3 boyutlu geçiş efektinin oluşmasını sağlayacak.

 

3 Boyutlu küp ve kutu tasarladığımız serimizin ilk bölümüne buradan

 

3 Boyutlu kitap tasarladığımız serimizin ikinci bölümüne buradan ulaşabilirsiniz.

 

3 Boyutlu resim galerisi tasarladığımız serimizin dördüncü bölümüne buradan ulaşabilirsiniz.

  Uygulamamızı buraya tıklayarak bilgisayarınıza indirip, inceleyebilirsiniz.

 

 Bu konuyu paylaş

 

 Konuyu geliştirmemize yardımcı ol, konuyu değerlendir.
 İlk Sen Değerlendir

 

 Yorum yaz, soru sor, geliştirme öner
E-Posta adresiniz yayınlanmayacak.

 

 İlk Yorumu Sen Yap