Yazılara Fareyi Takip Eden Arkaplan

Birkaç hünerli ve hileli CSS satırı ile web sayfanızdaki yazıların üzerini resim ile kaplayabilirsiniz. Daha önce paylaştığımız “CSS ile Yazı Arka Planı : text-fill-color” isimli makalede bu işlemi yapmıştık.

Gelin şimdi bu örneği biraz daha şık hale getirelim. İşin içerisine birkaç satır jQuery kodu ekleyerek yazıya kapladığımız arkaplanın fare imlecini takip etmesini sağlayabiliriz.

ÖRNEĞİ GÖRÜNTÜLE

Fareyi takip eden yazı arkaplanı nasıl hazırlanır?

İşin CSS tarafında -webkit-background-clip tanımı yardımımıza yetişecek. Geriye kalan kısmı ise jQuery’nin dinamik yapısı halledecek. Hazırsanız başlayalım.

HTML Kodları

Bir çerçeveye ve onun içerisindeki metin division öğesine ihtiyacımız olacak.

<div class="cerceve">
  <div class="metin">ADOBEWORDPRESS</div>
</div>

Şimdi bu kodları CSS ile stilize edelim.

CSS Kodları

Çerçevemizi sayfanın ortasına çekelim. Böylece tüm ekrandaki fare hareketlerini takip edebilsin. Bu adım atlanabilir ya da değiştirilebilir. Tercih sizin.

.cerceve{
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}

Şimdi de metin için atayacağımız arkaplanı ve yazı tipini belirtelim.

.metin{
  color: transparent;
  font: 800 100px sans-serif;
  background: url("resim.jpg") repeat;
  -webkit-background-clip: text;
}

Sırada işe biraz dinamizm katmak için jQuery kodlarımız var.

jQuery Kodları

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

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Şimdi de bu satırın hemen altına imleci izleme fonksiyonunu ekleyelim.

$(document).ready(function(){
  var fareX, fareY;
  var yatay, dikey;
  $(document).mousemove(function(e){
    fareX = e.pageX;
    fareY = e.pageY;
    yatay = ((4 * fareX) / 400) + 40;
    dikey = ((4 * fareY) / 400) + 50;
    $(".metin").css({"background-position": yatay + "%" + dikey + "%"});
  });
});

Bu kod sayesinde de farenin sayfa üzerindeki hareketi izleyerek metin classlı öğeye background-position atıyoruz.

Sorunuz mu var?

Yorumlar alanında belirtin, yardımcı olalım.

İyi çalışmalar.