JavaScript ile Fareyi (Mouse) Takip Eden Nesne Örneği

Bu küçük uygulamamızda JavaScript kullanarak fareyi (mouse) takip eden bir nesne örneklemesi yapacağız.

Şüphesiz ki JavaScript'in gücü gittikçe artmaktadır. Çeşitli yerlerde kullanım alanı göstermekte olduğunu görüyoruz. Gün geçtikçe artan bu öneme kayıtsız kalmamak adına arada sıra küçük uygulamalar ile makale yayınlıyorum.
Bu makalemizde etkileşimli JavaScript örneği işleyeceğiz. Eskiden Flash ile yapılan ilk örneklerin vazgeçilmezi olan "Mouse Takip Eden Nesne" örneğinin benzerini JavaScript dilinde yapacağız.
Küçük bir arayüz hazırlayalım.

HTML Betikleri

Arayüzü hazırladık, şimdi ise bunu CSS ile renklendirelim.
CSS Betikleri

.kapsul{width:400px;height:300px;position:relative;background:#ddd;margin:20px auto;}

.gezgin{width:20px;height:20px;background:red;position:absolute;left:0;top:0;border-radius:50%;}

Oluşan Arayüz

Yaptığımız arayüzü CSS ile renklendirdikten sonra mouse ile her hareketi yakalayıp kapsul içindeki nesneyi (gezgin) mouse'ın koordinatlarına göre hareket etmesini sağlayalım.

JavaScript Betikleri

var gezgin = document.querySelector('.gezgin');

let kapsul = document.querySelector(".kapsul"); 

kapsul.addEventListener("mousemove", function(event) 

  { 

    let alan = kapsul.getBoundingClientRect(); 

    let dblMouseX = event.clientX - alan.left; 

    let dblMouseY = event.clientY - alan.top; 

    let dblGezginX = gezgin.offsetLeft;

    let dblGezginY = gezgin.offsetTop;

    let dblFarkX = dblMouseX - dblGezginX;

    let dblFarkY = dblMouseY - dblGezginY;

    let dblKatsayi = 0.08;

    gezgin.style.left = (dblGezginX + (dblFarkX * dblKatsayi)) + "px";

    gezgin.style.top = (dblGezginY + (dblFarkY * dblKatsayi)) + "px";

  }

);

Kaynak: https://www.ontedi.com/javascript/javascript-ile-fareyi-mouse-takip-eden-nesne-ornegi

JavaScript ile Fareyi (Mouse) Takip Eden Nesne Örneği

Üye Girişi Yap