Image following mouse

0
293
Görüntülenme

mousemove

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 :

 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.

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 :

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 :

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ı’

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.

  •  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

Resim için

Video için

 

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.

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 3,00 out of 5)
Loading...
Önceki İçerikResmi siyah beyaz yapma
Sonraki İçerikMotio.js
1983 doğumlu, olmayan bir çocuk babası, espirili ve kendini cana yakın zanneden biri işte. Daha ne olsun ?
Paylaş

CEVAP VER

Lütfen yorumunuzu yazın.
Lütfen İsminizi bu alana yazın.