jQuery Hover ile Link Efekti

Tekrar merhabalar. jQuery kaynak kosununda zorluk çektiğimiz ülkemizde yabancı sitelerde dolaşıp bilgi birikimi yapayım derken hoverattribute adlı bir plugine denk geldim. Plugin gerçekten profesyonel bir dil ile kodlanmış ve jQuery içerisinde 3 adet fonksiyon yerleştirerek amacına ulaşmış gibi görünüyor. Pluginin amacı html kaynak kod içerisinde geçen bir a tag’i  (link) üzerine mouse ile gelindiğinde hover metodu sayesinde dilerseniz herhangi bir yazı, dilerseniz tıkladığınzda gideceğiniz siteyi www. olmadan ya da direk http://... şeklinde devam eden kısmını güzel bir efekt ile gösterebilirsiniz.

[one_third][button link="http://demo.zingocan.com/hover-demo/"]Demo Sayfası[/button][/one_third] [two_third_last][download_button link="http://demo.zingocan.com/hover-demo.rar"]Download[/download_button][/two_third_last] [clear]

jQuery Pluginden daha ziyade ben sizlere kullanabileceğiniz alanlardan bahsetmek istiyorum. Demo içerisinde verdiğim dosyada şu şekilde bir script kodları bulunmakta;

$(function(){
		$("h1 a").hoverAttribute({
			removeWWW: true,
			highlightURLPart: "domain"//"lastURIPart"
		});
		$("h2 a").hoverAttribute({
			attribute: "rel",
			tweenInFrom: "bottom"
		});
		$("h3 a").hoverAttribute({
			animationTime: 0.1,
			wrapLength: 55,
			wrapLink: "middle",
			removeProtocol: true
		});
	});

Burada hoverattribute adlı fonksiyon plugin içerisinde 3 çeşit bölgeye ayrılmıştır. Aslında bölge demek yanlış olur , tek bir fonksiyon fakat 3 çeşit sonuçtan  oluşuyor.

  • İlk sınıfımızda h1 tag‘larinin kullanıldığı alana etki ediyor. Emir şöyle geliyor; h1 tag‘i kullanıldığı zaman plugini çalıştır fakat, efekt içerisinde www. ibaresini gösterme , ayrıca domaini kalın yazı ile göster. Diye başlamaktadır.
  • İkinci olarak h2 tag‘inde şu emirler veriliyor;

efekt içerisinde gösterilecek yazı rel kısmına ait content’i ele alacak. Tween şekli ise bottom olarak belirlenmiş.

  • Son olarak h3 tag‘i şu şekilde;  animasyon süresi 0,1 ve Pozisyon 55, link şekli ise orta boy olarak belirlenmiş. Ayrıca bu alanda ise ne http:// ne de www. ibarelerini görebiliyoruz.

5 thoughts on “jQuery Hover ile Link Efekti

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

Şu HTML etiketlerini ve özelliklerini kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>