Günümüz web sitesi trendlerinden birisi de tek ekranda birden fazla sayfayı ve sunumu göstermek. Bu tip renkli geçişler hem görsel hem de işlevsel bazda kullanıcıları fazlasıyla etkilemekte.
Bu makalemizde CSS ve jQuery desteğiyle tek sayfalık web sayfası hazırlayacağız.
Tek sayfalık web sitesi nasıl yapılır?
Bu örnekte dört ayrı renkteki ekranı, aynı tasarım içerisinde kullanacağız. Tekniğin temeli, aktif ekranın perde önüne çıkarılması, pasiflerin de perdenin arkasında gizlenmesi şeklinde. CSS ile bu yapıyı stilize edip jQuery ile aktif ekranları ve geçişleri işleyeceğiz. İlk olarak HTML kodlarımız ile başlayalım.
HTML Kodları
İlk olarak bütün yapıyı çevreleyecek, ekranın tamamını kaplayacak bir wrapper oluşturalım. Daha sonra bu çerçeve içerisine 4 ayrı id tanımlanmış division ekleyelim. Sonrasında da bu divisionların içerisine navigasyonu sağlayacak ekran bağlantılarını ekleyelim.
İşin HTML kısmı bu kadar.
CSS Kodları
Tam ekranı kullanacağımız için ilk olarak html ve body elemanlarındaki kenar boşluklarını kaldıralım. Ve yüksekliğimizi 100% olarak ayarlayalım.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
Şimdi wrapper classını tanımladığımız div’in ölçütlendirmesini yapalım, scrollunu kaybedelim.
div.wrapper {
position: relative;
display: block;
width: 100%;
height: 400px;
overflow: hidden;
}
Wrapper tanımlı div içerisindeki alt divleri de absolute olarak yerleştirelim.
div.wrapper div {
position: absolute;
display: block;
width: 100%;
top: 400px;
height: 400px;
text-align: center;
}
Her bir ekran için renk tanımlayalım.
#bir {
background: #d9534f;
}
#iki {
background: #f0ad4e;
}
#uc {
background: #5bc0de;
}
#dort {
background: #5cb85c;
}
İşlem bu kadar. Ek olarak geçişi sağlayacak navigasyon linklerini ve h2 tipini düzenleyelim.
h2 {
font: 300 4em/2 'Open Sans', sans-serif;
color: #fff;
}
#bir a, #iki a, #uc a, #dort a{
background-color: rgba(0, 0, 0, 0.1);
font: 300 1em/2 'Open Sans', sans-serif;
color: #fff;
display: inline-block;
padding: 1em;
text-decoration: none;
border-radius: 4px;
margin: .5em;
}
#bir a:hover, #iki a:hover, #uc a:hover, #dort a:hover{
background-color: rgba(0, 0, 0, 0.2);
}
JavaScript Kodları
Body elemanını kapatmadan hemen öncesine, tüm CSS ve HTML kodlarının altına JavaScript kodlarımızı ekliyoruz.
Bu yapının işlevselliğini jQuery vermekte. O yüzden ilk jQuery kütüphanesini include ederek başlayalım.
<script></script>
Daha sonra yukarı ve aşağı animasyonu sağlayalım
var zTop = 1;
$('div.wrapper a').on('click',function(e){
e.preventDefault();
var index = $($(this).attr('href')).index();
var wh = $(window).height();
$('div.wrapper div').each(function(){
var $tgt = $(this);
var idx = $tgt.index();
$tgt.removeClass();
if(index == idx){ $tgt.stop(true,true).animate({top:0},'linear').addClass('active').css({'z-index':zTop}); }
if(index < idx) { $tgt.stop(true,true).animate({top:wh},'linear').addClass('below'); }
if(index > idx ){ $tgt.stop(true,true).animate({top:-wh},'linear').addClass('above'); }
});
zTop++;
})
Başlangıç için ilk sayfayı tetikleyelim.
$('a[href="#bir"]').trigger('click');
Yüksekliği ayarlayalım.
$(window).on('resize',function(){
var wh = $(window).height();
$('div.wrapper, div.wrapper div').height(wh);
$('.active').css({top:0});
$('.above').css({top:-wh});
$('.below').css({top:wh});
}).trigger('resize');
Kapanış
Bu dersimizde HTML, CSS ve jQuery ile tek ekranlık bir websitesi tasarladık. Bu pratik ve kullanışlı yapı kolaylıkla geliştirilebilir, etkileyici sunumlara alt yapı sağlayabilir.
İyi çalışmalar.
Kaynak : http://www.adobewordpress.com/tek-sayfalik-web-sitesi
