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
<div class="kapsul">
    <div class="gezgin"></div>
</div>

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
JavaScript ile Fareyi (Mouse) Takip Eden Nesne Örneği

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
let gezgin = document.querySelector('.gezgin'); //class="gezgin" olan div'i seçiyoruz.
let kapsul = document.querySelector(".kapsul");  //class="kapsul" olan div'i seçiyoruz.
kapsul.addEventListener("mousemove", function(event) //kapsul olan div'e olay dinleyici ataması yapıyoruz. Böylece bunun üzerindeki "hareket, tıklama, çift tıklama vs.." gibi olayları yakalayabileceğiz. Bu olayda "mousemove" ile mouse hareket ettikçe dinleme yapıyoruz.
  { 
    let alan = kapsul.getBoundingClientRect(); //kapsul nesnesini tüm nesneler içinde sınırlanmış alan olarak belirtiyoruz. Diğer bir değişle ekranın tümüyle değil de sadece bu alanıyla işlem yapacağımızı belirtiyoruz.
    let dblMouseX = event.clientX - alan.left; //Mouse'ın bu alan içindeki x-eksenindeki değerini alıyoruz.
    let dblMouseY = event.clientY - alan.top;  //Mouse'ın bu alan içindeki y-eksenindeki değerini alıyoruz.
    let dblGezginX = gezgin.offsetLeft; //Gezgin adlı nesnenin x-eksenindeki değerini alıyoruz.
    let dblGezginY = gezgin.offsetTop; //Gezgin adlı nesnenin y-eksenindeki değerini alıyoruz.
    let dblFarkX = dblMouseX - dblGezginX; //Mouse ilerledi, gezgin geride kaldı. İki nesnenin x-ekseni koordinat farkını alıyoruz.
    let dblFarkY = dblMouseY - dblGezginY; //Mouse ilerledi, gezgin geride kaldı. İki nesnenin y-ekseni koordinat farkını alıyoruz.
    let dblKatsayi = 0.08; // Gezgin ile Mouse arasındaki fark hemen kapanmasın diye yani yavaşça ilerlesin diye hızını bu kaysayi ile çarpacağız.
    gezgin.style.left = (dblGezginX + (dblFarkX * dblKatsayi)) + "px"; // Gezgin x-ekseni üzerinde 7'de olsun. Mouse ise 25'de olsun. Gezgin Mouse'ın yanına gitmek için (7 + ((25-7) * 0.08)) = 8.44 birim kadar ilerlemeli.
    gezgin.style.top = (dblGezginY + (dblFarkY * dblKatsayi)) + "px"; // Gezgin y-ekseni üzerinde 3'de olsun. Mouse ise 19'da olsun. Gezgin Mouse'ın yanına gitmek için (7 + ((19-3) * 0.08)) = 1.28 birim kadar ilerlemeli.
  }
);
Örnek

Mouse X:

Mouse Y:

Gezgin X:

Gezgin Y:

Fark X:

Fark Y:

Yorumlar

Henüz hiçbir yorum yazılmamış. İlk yorumu siz yapın.

Yorum Yaz

Avatar

REKLAM

DDos Koruma, Botnet Koruma, Layer 7 Saldırı koruması, Sanal sunucu, Vds sunucu

REKLAM

Çizgi Filmler

INSTAGRAM VIDEO İNDİR

Instagram Video İndirme Aracı

EN

  • Popüler
  • Yeni
  • Son Yorum