Jquery ile background animate (kayan arkaplan efekti)


Uzun süredir sitede web tasarım ile ilgili içerikler yayınlamıyordum. Bunun temel sebebi zamanımın çoğunu zaten bu tür şeylerin alıyor olması, yani burda biraz daha farklı şeylerden bahsetmek, kendime zaman ayırmak istiyordum. Öte yandan bu siteyi açarken aklımdan geçenlerden biri de severek kullandığım / ürettiğim tasarım içeriklerini depolamak, lazım oldukça alıp kullanmaktı. Şimdi bu olaya devam etmeye karar verdim, farkettim ki Google’da ne zaman ihtiyaç duyduğım bir içeriği arasam karşıma yine kendi sitem çıkıyor.

Scriptimize gelecek olursak: Tasarım elemanlarınızın arkaplan pozisyonlarını animasyon efektleriyle değiştirebileceğiniz, içerisine bir tutam hayal gücü katarak ziyaretçilerinize şaşırtıcı deneyimler yaşatabileceğiniz kullanımı oldukça kolay bir jquery plugini.

Kullanım

Jquery kütüphanesini ve plugini (paketin içerisinde mevcut) </head> tagından önce çağırın

1
2
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery.backgroundPosition.js"></script>

Tasarım elemanlarızın üzerine gelindiğinde arkaplan pozisyonlarının değişmesi için .hover() eventini kullanabilirsiniz. Bunun için yine </head> tagından önce aşağıdaki kodları yerleştirin (veya scripts.js gibi bir isimle kaydedip yukarıdaki biçimde çağırın)

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
$(document).ready(function(){  
$(".bgme").hover(
   function () {
    $(this).animate({backgroundPosition: '-100px 0'}); // Arkaplan pozisyonunu değiştir
   },function(){
    $(this).animate({backgroundPosition: '0 0'}); // Önceki pozisyona dön
 });
}); //doc ready end
</script>

Buna göre .bgme class’ı atadığınız elemanların üzerlerine mouse ile gelindiğinde arkaplan pozisyonları belirttiğiniz değerlere göre (-100px 0) animasyonlu olarak değişecek.

Yine </head> tagından önce elemanların arkaplan resimlerini, ilk pozisyonlarını (ve tabi genişlik/yükseklik değerlerini) tanımlayın. Arkaplan resimlerinin, elemanların genişlik ve yüksekliklerinden animasyon efektine izin verecek kadar büyük olmasına dikkat edin.

1
2
3
4
5
<style type="text/css">
 .bg1 { background: url('images/arkaplan1.jpg') 0 0; }
 .bg2 { background: url('images/arkaplan2.jpg') 0 0; }
 .bg3 { background: url('images/arkaplan3.jpg') 0 0; }
</style>

Elemanlarınızı <body> tagından sonra, tasarımızın uygun bir yerine yerleştirdikten sonra işlem tamam.

1
2
3
<div class="bgme bg1"></div>
<div class="bgme bg2"></div>
<div class="bgme bg3"></div>

Tüm süreci mümkün mertebe başlangıç seviyesine göre anlatmaya çalıştım, aklınıza takılan noktalar için scriptin çalışan örneğini inceleyebilirsiniz.

Demo / Download

Scriptin çalışan örneği: Demo
Scripti indir (1.2 MB): Download

İlginizi Çekebilecek Diğer İçerikler

Facebook Yorumları

9 Yorum

Uyarı: Yorumlarda link kullanmayınız. Link içeren yorumlar otomatik olarak spam kabul edilmektedir.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir