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

  1. “…farkettim ki Google?da ne zaman ihtiyaç duyduğım bir içeriği arasam karşıma yine kendi sitem çıkıyor…” Bak ibareye bak Allah cezanı vermesin senin Caner one özgüven o..:)) Hakkaten bu olay benim aklıma gelmişti valla bak php ile yapayım dedim de sayfa yeniden load olmadan php yorumlayıcısına erişemediğimizden dolayı çıkamadım işin içinden yani aniden refresh koysak sonra yorumlayıcıda arkaplanı değiştirip getiricez de refresh olunca da büyüsünü kaybediyo dikkat dağılması sinir bozulması yapıyor ziyaretçide.. Sanırım php nin en kötü tarafı bu sunucuya post edilene kadar yorumlayıcının hiç birşeyden haberi olmuyor tepki veremiyor.. Benim bilmediğim ama senin bildiğin bir çözümü varmı php için bu olayın Caner merak ediyorum paylaşırmısın eğer varsa onuda merak ediyorum.. Çok mu meraklıyım ben ya mazallah ne gelirse meraktan falan.. şeytanın kulağına kurşun..

    • Caner
      Yazar

      Ne yazık ki Ahmet PHP ile böyle bir uygulama yapamazsın. PHP sunucu taraflı çalışır, kodlar sunucuda bir kere yorumlanır ve kullanıcıya statik html çıktısı gösterilir. Bu gibi uygulamalar için javascript gibi kullanıcı tarafında çalışan bir dil kullanman gerek.

  2. Necdet Tenekeci

    animate() methodundan önce stop() koyarsan mouse ile üzerinden hızlıca 3-4 kere geçtiğinde animasyonun 3-4 kere oynamasını engellersin.  …).stop().animate(…

  3. Sizden bi ricam olucak en üssteki istanbul yazan bi js var onu kodunu bana gönderebilrimisiniz?

    Ayrıntılı bir şekilde demosu felan varsa.

    • Caner
      Yazar

      Parallax efekti diye geçer, “jquery parallax” diye arattrıp bulabilirsiniz fakat bu tepedeki tasarım bana ait olduğu için ne yazık ki başka bir yerde kullanamazsınız.

  4. Webmaster Destek

    bu tip kaliteli paylaşımları türkçe olarak bulmak inanın çok zor.
    emeğinize sağlık derken jquery uygulamalarının devamını sizden rica ediyorum.

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