Tek Sayfalık Web Sitesi

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.

ÖRNEĞİ GÖRÜNTÜLE

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.

<div class="wrapper">
  <div id="bir">
    <h2>KIRMIZI</h2> 
    <a href="#bir">EKRAN 1</a>
    <a href="#iki">EKRAN 2</a>
    <a href="#uc">EKRAN 3</a>
    <a href="#dort">EKRAN 4</a>    
  </div>
  <div id="iki">
    <h2>SARI</h2> 
    <a href="#bir">EKRAN 1</a>
    <a href="#iki">EKRAN 2</a>
    <a href="#uc">EKRAN 3</a>
    <a href="#dort">EKRAN 4</a>       
  </div>
  <div id="uc">
    <h2>MAVİ</h2> 
    <a href="#bir">EKRAN 1</a>
    <a href="#iki">EKRAN 2</a>
    <a href="#uc">EKRAN 3</a>
    <a href="#dort">EKRAN 4</a>       
  </div>
  <div id="dort">
    <h2>YEŞİL</h2> 
    <a href="#bir">EKRAN 1</a>
    <a href="#iki">EKRAN 2</a>
    <a href="#uc">EKRAN 3</a>
    <a href="#dort">EKRAN 4</a>       
  </div>
</div>  

İş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 type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></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.