Fare İmleciyle Hareket Eden Arka Plan Yapma

JavaScript ile fare hareketlerini kovuşturmak oldukça kolay. Geçtiğimiz yıl bu fonksiyonu kullanarak fare pozisyonuna gore hareket eden yazı arka planı hazırlamıştık.

Bugün sizlerle beraber yepyeni bir örnek, fare pozisyonuna bakılırsa dinamik bir halde hareket eden arkaplan resmi hazırlayacağız.


Fareyle bir hareket eden arkaplan resmi yapımı

İlk aşamada ihtiyacımız olan tek şey arkaplanı kullanacağımız bir eleman.

Eğer bu örnekte kullanmak suretiyle bir arkaplan resmine ihtiyacınız var ise sizi buraya alalım : Adobewordpress Wallpaper

İlk olarak HTML kodu ile başlamış olalım.


HTML Kodları

Daha ilkin de dediğimiz şeklinde ihtiyacımız olacak tek şey basit bir div elemanı.

 <div class="dinamik-background"></div>

Şimdi sırada CSS kodlarımız var.


CSS Kodları

CSS kodlarımız ile bu yapıyı ekranımıza yerleşecek şekilde boyutlandıralım.

 body,html div.dinamik-background         background:url('http://www.adobewordpress.com/duvar-kagitlari/wallpaper-37.jpg') -25px -50px;         background-size: calc(100% + 50px);     width: 1280px;     height: 720px;

Görselinizin boyutuna bakılırsa px yada yüzde bazlı boyutlandırma yapabilirsiniz.


JavaScript Kodları

Ilk olarak sayfanızda jQuery tanımlı olup olmadığına bakın. Eğer yoksa body‘nin bittiği yere, tanımının derhal öncesine jQuery’i ilave ederek devam edelim.

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

Yapımızı document.ready içine aldıktan sonrasında işleme başlıyoruz.

         $  (document).ready(function()                  var seviye = 25;                 var yukseklik = seviye / $  (window).height();                 var genislik = seviye / $  (window).width();                 $  ("body").mousemove(function(e)                         var sayfaX = e.pageX - ($  (window).width() / 2);                         var sayfaY = e.pageY - ($  (window).height() / 2);                         var yenidegerX = genislik * sayfaX * -1 - 25;                         var yenidegerY = yukseklik * sayfaY * -1 - 50;                         $  ('div.dinamik-background').css("background-position", yenidegerX+"px     "+yenidegerY+"px");                 );         );

Üstteki kod içinde yorum satırı olarak bıraktığımız iki tane selector tanımı mevcut. Şimdi birazcık bu tanımları açalım.

  • Selector 1 : Fare hangi alanda oynadığında arkaplan resminin konumunu dinamik olarak değişiklik yapmak istersiniz? Bu alana o elemanı yazıyoruz. Mesela şuanki haliyle ilerlerseniz ekranın body içinde herhangi bir yerde imleç yer değiştirirse fotoğraf hareket özelliği kazacaktır.
  • Selector 2 : Arkaplan resminin nereye uygulanacağını belirtiyoruz.
Bu da ilginizi çekebilir  Windows’a Mac OS Fare İmleçlerini Ilave edin

Böylece çalışmamız bitmiş oluyor.

fareyle-hareket-eden-arkaplan
fareyle-hareket-eden-arkaplan

Bitirmeden evvel

Sorularınızı yorum alanında bizlere iletebilirsiniz. Her türlü fotoshop çalışmalarınıza da destek oluruz.

İyi emek harcamalar.

Yazar: admin

Bir Cevap Yazın

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