Jquery ve Css İle Fareyi Takip Eden Göz Uygulaması Yapımı

  Bu yazıda Jquery ve Css kullanarak fareyi izleyen göz örneği oluşturacağız.Gözün arka plan resmi olarak Temel Reis resmini kullanacağız,fakat istenirse değişik resimlerde kullanılabilir(Çeşitli hayvan resimleri,başka çizgi roman karakterleri vb) jquery-fareyi-takip-eden-goz

Fareyi Takip Eden Göz Uygulaması

 

Uygulamanın Kodları



<html>
<head>
<style>
#tasiyici{
width:258px;
height:182px;
background-image: url("temel.png");
background-repeat:no-repeat;
z-index:1;
border: 1px solid red;
}
#goz{
margin-left:115px;
margin-top:70px;
width:25px;
height:25px;
float:left;
font-size:23px;
color:#090715;
font-weight:bold;
text-shadow: 0 0 5px #3C1905, 0 0 5px #3C1905;
border-radius: 100%;
text-align: center;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.4.2.js"></script>
<script>
$(document).ready(function(){
 var gozElementi = $('#goz');
 if (gozElementi.length > 0) {
 var konumBilgisi = gozElementi.offset();
 
 function fareTakip(bilgi) {
 var xMerkezi = (konumBilgisi.left + 5) + (gozElementi.width() / 2);
 var yMerkezi = (konumBilgisi.top) + (gozElementi.height() / 2);
 var xFare = bilgi.pageX;
 var yFare = bilgi.pageY;
 var radianDegeri = Math.atan2(xFare - xMerkezi, yFare - yMerkezi);
 var derece = (radianDegeri * (180 / Math.PI) * -1);
 gozElementi.css('-moz-transform', 'rotate(' + derece + 'deg)');
 gozElementi.css('-webkit-transform', 'rotate(' + derece + 'deg)');
 gozElementi.css('-o-transform', 'rotate(' + derece + 'deg)');
 gozElementi.css('-ms-transform', 'rotate(' + derece + 'deg)');
 }
 $("#tasiyici").mousemove(fareTakip);
 }
});
</script>
</head>
<body>
<div id="tasiyici"> 
<div id="goz">.</div>
</div>
</body>
</html>
.

Background Resmi

 
jquery-mouse-eyes-follow

Sag Tıklayıp Resmi Kaydedin

Uygulama Bilgileri


Kullandığımız Jquery Versiyonu: Jquery 1.4.2. Geriye dönük uyumluluk olduğu için en son jquery  versiyonlarında da çalışır.
Çalışma Mantığı: Uygulamanın çalışma mantığı şu şekilde:İki tane div elementimiz var.Bunlaran biri gözü oluşturduğumuz ve id'si goz olan div ,diğeride fare takibinin yapılacağı alanı belirlediğimiz ve arka plan resmini eklemek için kullandığımız id'si tasiyici olan div.
Fare tasiyici id'sindeki divin alanına girdiğinde fareyi takip etme işlemi başlayacak.Yukarıdaki kodlardan da göreceğimiz gibi goz divinin içinde sadece bir nokta var.Bu noktaya gerçekten göze benzemesi için css'te gölge ekledik.Bu uygulamada yapılan işlem bu divin içindeki noktanın fareye göre döndürülmesi işlemi.Fare tasiyici id'sindeki divin alanına girdiğinde Jquery'nin mousemove metodunu çağırıyoruz.Bu metotta goz id'li divin ekrandaki konumu ve farenin ekrandaki konumuna göre radian değerini,dönme açılarını belirleyip css değerlerini ayarlayarak noktayı döndürüyor.

Css Bilgileri


Arka plan resmi olarak kullandığımız resmin boyutları 258*182 piksel.Bundan dolayı taşıyıcı divin boyutlarınıda css de aynı veriyoruz.Bu arka plan resminin göz kısmını herhangi bir resim düzenleme programıyla beyaz renkle kaplıyoruz ki dönecek olan göz burda görünebilsin.

goz Divinin Css Bilgileri: margin-left ve margin-right değerleri ile gözü oluşturan noktanın arka plan resminin tam göz bölümüne gelmesi için gereken ayarlamayı yapıyoruz.Width ve height değeri ile dive genişlik ve yükseklik tanımlıyoruz.Font-size ile gözü oluşturan noktanın font olarak boyunu belirliyoruz.Text-shadow bölümünde gözün gerçekci görünmesi için gölge veriyoruz.Burdaki renk değerlerini değiştirerek farklı göz renkleri verilebilir.

Hiç yorum yok:

Yorum Gönder