jQuery ile Scroll ve Arkaplan İlişkisi

jQuery‘nin scrollTop tanımı ile birlikte web sayfalarındaki kaydırma çubuğununun seviyesini numerik olarak yakalayabiliyoruz. Hal böyleyken bu yapıyı niye CSS3 ile ilişkilendirip şık tasarımlar hazırlamayalım ki?

Bu dersimizde aşağıya scroll edildikçe büyüyen ve bulanıklaşan arkaplan tasarımı yapacağız. İşlevsellik yükünü jQuery, tasarım yükünü de CSS sırtlayacak. Hazırsanız başlayalım.

ÖRNEĞİ GÖRÜNTÜLE

jQuery ile aşağı scroll edildikçe büyüyen ve bulanıklaşan arkaplan

Bu işlemi yapmak için ilk olarak elemanımızı HTML’de tanımlamamız gerekiyor. Daha sonra CSS ile ekranın herbir kısmını kaplayıp arkaplanımızı uygulayacağız. İşin dinamikliğini de jQuery ile hazırlayacağız.

HTML ile başlayalım.

HTML Kodları

Sadece süreci ilerletebileceğimiz bir arkaplan öğesine ihtiyacımız var.

<div class="arkaplan"></div>

CSS Kodları

Body tanımınızda margin ve padding değerlerinin 0’a çekilmesi gerekiyor. Aksi halde bazı tarayıcılarda kenar boşlukları oluşabiliyor.

body{
    padding:0;
    margin:0;
}

Şimdi de arkaplan ismini verdiğimiz division öğemizi tasarlayalım.

.arkaplan {
    position:fixed; 
    top:0; 
    z-index:0; 
    width:100%; 
    padding-top:50%; 
    background: url(ARKAPLAN_RESMI.jpg) center center no-repeat; 
    transform:scale(1);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Artık bu yapıyı dinamik hale getirebiliriz.

jQuery Kodları

Öncelikle sayfanızda jQuery tanımlı olup olmadığına bakın. Eğer yoksa Body‘nin bittiği yere, tanımının hemen öncesine jQuery’i ekleyerek devam edelim.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Şimdi kodlarımızı ekleyebiliriz.

$(window).scroll(function(e) {

  var scrollSeviye = $(this).scrollTop();
  
  if(scrollSeviye>2400){
    scrollSeviye=2400;
  }
  
  var buyutme=(scrollSeviye/6000)+1;
 
  $('.arkaplan').css('-webkit-filter', 'blur('+scrollSeviye/120+'px)');
  $('.arkaplan').css('transform', 'scale('+buyutme+')');

});

Burada 2400 üst limitimiz oluyor. Bu değeri geçen yüksekliklerde arkaplan resmini büyütmeyi ve bulanıklaştırmayı kesiyoruz. Daha sonra da CSS’in ölçeklendirme ve filtre efektlerini kullanıyoruz.

Yorumlarınız?

Bu dinamik arkaplan tasarımımızla ilgili öneri ve yorumlarınızı bekliyoruz.

İyi çalışmalar.