Jquery İle Hareketli Linkler

15 Şub 2010 tarihinde eklendi. Blog | 2 yorum

Jquery İle Hareketli Linkler

Jquery’i bu kadar sevmemizin en önemli sebebinin animasyon kabiliyeti olduğunu biliyoruz sanırım. Hatta Jquery çıktıktan sonra Javascript öğrenmeye karar veren web tasarımcıların sayısında artış olduğu da bilinmektedir. Bu küçük uygulama da Jquery‘nin kendini bu kadar sevdirebilmesinin en basit örneklerinden.

Sitenizdeki linklerin alt çizgisine animasyon ekleyerek, linklerinizi çekici hale getirebilirsiniz. Belki de bu sayede linklerin tıklanma sayısı da artar, belli mi olur:) Bunun için yapacağınız işlem gerçekten çok basit ama daha önce kimsenin aklına gelmeyen (en azından benim daha önce hiç görmediğim) yaratıcı bir efekt. İlk olarak Css-Tricks sitesinden Chris Coyier’in aklına gelmiş ve yayınlamış.

Başlıyoruz o halde;


Öncelikle linkinizin stiline position:relative özelliğini ekliyoruz. Sonra da bütün linklerimize span elementini eklemek için Jquery kullanıyoruz. Eklediğimiz position:absolute şeklinde konumlandırılarak linkin hemen 1 px altına yerleştiriliyor. Ve yüksekliğini 1px, genişliğini de 100% vererek sanki linkin alt çizgisiymiş gibi bir görünüm kazandırılıyor. CSS olarak yazmak gerekirse;

1
2
3
4
5
6
span{
position:absolute;
bottom:-1px;
height:1px;
width:100%
}

şeklinde oluyor. Tabi bu css’i Jquery otomatik olarak oluşturduğundan sizin ayrıyeten eklemenize gerek yok. Linkin üstüne gelince alt çizginin hareket etmesi için, span’ın satır yüksekliğine (line-height) animasyon eklenerek son halini alması sağlanıyor. Ve sonuç mükemmel.

DEMOYU GÖR

Demo’da efektin 3 farklı tekniği bulunuyor. 3. teknik, 2. tekniğin biraz değiştirilmiş hali.

Siz de linklerinize bu efekti eklemek isterseniz aşağıdaki javascript kodlarını kullanabilirsiniz. Aşağıdaki kodların çalışması için sayfanıza Jquery’i de eklemeniz gerekiyor. Bunun için sayfanızın <head> bölümüne aşağıdaki satırı ekleyin.

1
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js?ver=1.3.2" type="text/javascript"><!--mce:0--></script>

Şimdi aşağıdaki tekniklerden istediğinizi sayfanıza uygulayabilirsiniz.

1. TEKNİK

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
$(function() {
var $el = $(),
linkHeight = parseInt($("p").css("line-height")),
speed = 175; // 1000 = 1 second
$("#first a").each(function() {
$el = $(this);
// If the link spans two lines, put a line break before it.
if ($el.height() &gt; linkHeight) {
$el.before("
");
}
$el.prepend("");
}).hover(function() {
$el = $(this);
$el.find("span").stop().animate({ height: linkHeight, opacity: 0.3 }, speed);
}, function() {
$el = $(this);
$el.find("span").stop().animate({ height: "1px", opacity: 1 }, speed);
});
});

2. TEKNİK

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(function() {
var $el = $(),
speed = 175; // 1000 = 1 second
// SECOND TECHNIQUE
$("#second a").hover(function() {
$el = $(this);
$el.stop().animate({ backgroundPosition: "(0px 0px)", color: "white" }, speed);
}, function() {
$el = $(this);
$el.stop().animate({ backgroundPosition: "(0px 15px)", color: "#900" }, speed);
});
});

Yalnız Internet Explorer 8.0′da düzgün çalıştığı halde IE 6.0 ve IE 7.0 versiyonlarında düzgün çalışmayabilir. Sitenizde kullanmadan önce kontrol etmenizde fayda var.

DEMOYU GÖR

Benzer Yazılar:

  • http://www.bildirgec.org M.Ali Coder

    Explorer 7 de çalışıyor ama düzgün degil. Güzel bir efekt.niye benim aklıma gelmediki daha önce:)

  • http://www.emircanotokiralama.com Oto kiralama

    Explorer 7 de çalışıyor ama düzgün degil. aynen