Fareyle Birlikte Hareket Eden Arkaplan Resmi

JavaScript ile fare hareketlerini takip etmek çok kolay. Geçtiğimiz sene bu fonksiyonu kullanarak fare pozisyonuna göre hareket eden yazı arka planı hazırlamıştık.

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

ÖRNEĞİ GÖRÜNTÜLE

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.

İlk olarak HTML kodu ile başlayalım.

HTML Kodları

Daha önce de dediğimiz gibi ihtiyacımız olacak tek şey sıradan 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('https://www.adobewordpress.com/duvar-kagitlari/wallpaper-37.jpg') -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 bitmiş oluyor.

Bitirmeden Önce

Sorularınızı yorum alanında bize iletebilirsiniz.

İyi çalışmalar.