Web sitenize eğlenceli çalışmalar eklemek için kullanımı kolay bir örnek. Mouseyi sürekli takip eden yazılar, resimler, videolar veya çerçeveler eklemeniz mümkün. Sadece süs için kullanılabilir başka da hiç bir işe yaramayan bir çalışma. Yani kalkıpta bir çerçeve hazırlayıp bu çerçevenin içine de bir menü eklemek isterseniz üyeleriniz mouse ile menüdeki kategorilere tıklayamaz.
Demo olarak mouseyi takip eden bir resim ve youtube üzerinden yayınlanan bir video ekledim. Telif hakkı olabilir diye video bağlantısı bozuk daha doğrusu bağlantı linkine fazladan bir kaç tane karakter daha ekledim buradan çalışmaması için.
Kullanım
- Head etiketleri arasına eklemeniz gereken bölümler.
jQuery url adresi :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
JavaScript :
Eklemek istediğiniz nesne adı aşağıdaki gibi olmalıdır. Benim eklediğim .mintik adı altında bir css sınıf.
$('.sınıf-adı')
Bir resmin mouseyi takip etmesini istiyorsanız <img kodundan sonra class=’sınıf -adı‘ eklemeniz gerekiyor. Bu şekilde yapmazsanız JavaScript kod hangi resmi seçeceğini karıştırır ve yanlış bir çalışma yamış olursunuz.
Mouseyi takip edecek örnek resim kodu :
<img class="sınıf-adı" src="resminiz.png">
Mouseyi takip etmesi için youtube sitesinden bir video eklemek istiyorsunuz. Video paylaşım sitelerinden alacağınız video adresleri genellikle iframe ile kullanılır
Örnek Youtube video kodu :
<iframe width="640" height="360" src="https://www.youtube.com/embed/videonuz?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>
Yine her nesne seçiminde yapacağımız gibi yapıyoruz mouseyi takip edecek resimde yatığımız gibi. <iframe kodundan sonra class=’sınıf-adı’ eklememiz gerekiyor. <iframe class=’sınıf-adı’
<iframe class="youtube" width="640" height="360" src="https://www.youtube.com/embed/czmFOcA_Sv4?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>
JavaScript Kod :
Burada benim kullandığım sınıf adı .mintik olarak geçiyor. Mouseyi takip etmesini istediğim html elementlere sınıf adı olarak mintik eklemem gerekiyor.
<script type='text/javascript'>//<![CDATA[
$(function(){
$(document).mousemove(function(e) {
$('.mintik').offset({
left: e.pageX,
top: e.pageY + 20
});
});
});//]]>
</script>
- Body etiketleri arasına eklemeniz gereken bölüm.
Html :
Resim için
<img class="mintik" src="resim.png" alt="mintik.com">
Video için
<iframe class="youtube" width="640" height="360" src="https://www.youtube.com/embed/video?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>
Demo sayfasında kullandığım arkaplan Lea Verou tarafından hazırlanmış bir desendir. Bunun gibi daha bir çok deseni ve nasıl kullandığını buradan inceleyebilirsiniz.