Yazılar geri dön

Fareyle Birlikte Hareket Eden Arkaplan Resmi

Fareyle Birlikte Hareket Eden Arkaplan Resmi JavaScript ile fare hareketlerini takip etmek çok kolay. Mouse (fare) hareketleriyle pozisyonuna göre hareket eden arka plan resim nasıl yapılır birlikte inceleyelim…

Bugün sizlerle birlikte yepyeni bir örnek, fare pozisyonuna göre dinamik bir şekilde hareket eden arkaplan resmi hazırlayacağız.

Fareyle bir hareket eden arkaplan resmi nasıl yapılır?

İlk aşamada ihtiyacımız olan tek şey arkaplanı kullanacağımız bir eleman.

HTML Kodları

Daha önce de dediğimiz gibi ihtiyacımız olacak tek şey sıradan bir div elemanı.

Şimdi sırada CSS kodlarımız var.

CSS Kodları

CSS kodlarımız ile bu yapıyı ekranımıza yerleşecek şekilde boyutlandıralım.

Görselinizin boyutuna göre piksel veya yüzde bazlı boyutlandırma yapabilirsiniz.

JavaScript Kodları

Öncelikle sayfanızda jQuery tanımlı olup olmadığına bakın. Eğer yoksa body‘nin bittiği yere, tanımının hemen öncesine jQuery’i ekleyerek devam edelim.

Yapımızı document.ready içerisine aldıktan sonra işleme başlıyoruz.

Üstteki kod içerisinde yorum satırı olarak bıraktığımız iki tane selector tanımı mevcut. Şimdi biraz bu tanımları açalım.

  • Selector 1 : Fare hangi alanda oynadığında arkaplan resminin konumunu dinamik olarak değiştirmek istersiniz? Bu alana o elemanı yazıyoruz. Örneğin şuanki haliyle ilerlerseniz ekranın body içerisinde herhangi bir yerde imleç yer değiştirirse resim hareket özelliği kazacaktır.
  • Selector 2 : Arkaplan resminin nereye uygulanacağını belirtiyoruz.

Böylece çalışmamızı tamamlamış oluyoruz.

İçeriği Puanlayabilirsiniz !

Değerlendirmek için yıldıza tıklayın!

Ortalama puan 0 / 5. Oy sayısı: 0

Şimdiye kadar oy yok! Bu gönderiyi ilk değerlendiren siz olun.

Yazılar geri dön