Fareyle Birlikte Hareket Eden Arkaplan Resmi Nasıl Yapılır?

Fareyle Birlikte Hareket Eden Arkaplan Resmi

Fareyle Birlikte Hareket Eden Arkaplan Resmi JavaScript ile fare hareketlerini takip etmek çok kolay. Mouse (fare) hareketleriyle pozisyonuna göre hareket eden arka plan resim nasıl yapılır birlikte inceleyelim…

Bugün sizlerle birlikte yepyeni bir örnek, fare pozisyonuna göre dinamik bir şekilde hareket eden arkaplan resmi hazırlayacağız.

Fareyle bir hareket eden arkaplan resmi nasıl yapılır?

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

HTML Kodları

Daha önce de dediğimiz gibi ihtiyacımız olacak tek şey sıradan bir div elemanı.

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

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('https://alaoglutasarim.net/fareyle-birlikte-hareket-eden-arkaplan-resmi-nasil-yapilir/')
  üstdeki linklemeye Görsel adresinizi girin -25px -50px; 
  background-size: calc(100% + 50px);
  width: 1280px;
  height: 720px;}

Görselinizin boyutuna göre piksel veya yüzde bazlı boyutlandırma yapabilirsiniz.

JavaScript 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>

Yapımızı document.ready içerisine aldıktan sonra 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çerisinde yorum satırı olarak bıraktığımız iki tane selector tanımı mevcut. Şimdi biraz bu tanımları açalım.

• Selector 1 : Fare hangi alanda oynadığında arkaplan resminin konumunu dinamik olarak değiştirmek istersiniz? Bu alana o elemanı yazıyoruz. Örneğin şuanki haliyle ilerlerseniz ekranın body içerisinde herhangi bir yerde imleç yer değiştirirse resim hareket özelliği kazacaktır.
• Selector 2 : Arkaplan resminin nereye uygulanacağını belirtiyoruz.

Böylece çalışmamızı tamamlamış oluyoruz.