Cazip kılmak için sitede yer alan bağış yap yazısını nasıl dikkat çekecek şekilde gösteririm derken aklıma yanıp sönme efekti vermek geldi ve bunu da siteye uyarladım. Şuan biraz garip gelse de biraz yadırgasam da güzel bir şey oldu aslında. Ha baktım olmuyor biraz düzenleyerek daha iyi bir hale getiririm artık. Her neyse bunu yaptıktan sonra böyle dikkat çekilmesini istediğiniz yazılar, butonlar vs..vs.. nasıl yapabilirsiniz bunu da sitede göstereyim dedim.
Bu işlemi setInterval kullanarak hazırladım. Yazıya bakıldığında aslında nasıl yapmış ney yapmış denilebilir ama o kadar basite kaçtım ki; “Ben bu kadar üşengeç miydim?” dedim kendi kendime
Şimdi bu tarz bir yazı nasıl oluşturulur bunu görelim. Öncelikle bir link yapısı oluşturalım ve buna kolay bir şekilde ulaşabilmek için class verelim.
<a href="#" class="yanan">HEMEN TIKLAT</a>
Yukarıdaki gibi bir link bağlantısı oluşturduktan sonra altında bir tane daha link yapısı oluşturuyoruz. Aslında burada yapacağımız şey üstteki linki gizlemek ve sonrasında göstermek. Link gizlendiğinde ise altında yer alan link görünecektir.
Şimdi bir link daha oluşturalım. Hatta aynı linki kopyalayıp altına yapıştırın. Yani şöyle olacak;
<a href="#" class="yanan">HEMEN TIKLAT</a> <a href="#" class="yanan">HEMEN TIKLAT</a>
Şimdi biraz görsellik biraz da ayar katalım bu işe. Css kodlarımız ile link yapısını şöyle düzenleyelim;
a.yanan{
font: 14px/21px Arial;
color: blue;
text-decoration:none;
display:block;
font-weight:700
}
Biraz görünüm olarak düzenlemeler yaptık. Bu hali ile alt alta 2 link olacaktır. Şimdi alttaki linki üstte bulunan linkin üstüne getirelim. Bunun için link yapısına style içinde düzenlemeler yapalım. En üstte yaptığımız link yapısı bu düzenleme ile şu şekilde olacaktır.
<a href="#" class="yanan">HEMEN TIKLAT</a> <a href="#" class="yanan" style="margin-top:-21px;color:Red">HEMEN TIKLAT</a>
Burada dikkat edilmesi gerekilen yer; margin-top ile eksi değer alan sayıdır. Bu sayı benim düzenlemedeki 14px/21px den gelmektedir. Eğer sitenizin kelime yükseklik aralığı farklı ise bunu değiştirmeniz gerekmektedir.
Son durumu değerlendirecek olursak; İki adet link yapısı oluşturduk ve bunları css ile düzenledik. Düzenleme sonrasında alttaki linki üsttekinin bulunduğu konuma getirdik. Bunun için link yapısında style alanında margin-top değerini “-” ile belirttik. Sonrasında renk belirterek yanıp sönme olayını yakalamaya çalıştık.
Yukarıdaki işlemler biraz düzenleme biraz alt yapı oluşturma işlemiydi. Şimdi jQuery kodumuzu yazalım ve bu linkleri biraz canlandıralım.
$(function(){
setInterval(function(){
$(".yanan:eq(1)").fadeOut(500).fadeIn(500);
}, 250);
});
İşte olay budur. Yukarıda yer alan kodu inceleyecek olursak; setInterval ile sürekli yenilenen bir yapı oluşturduk. Bu yapının içine classı yanan olan ve 2. Sırada olan değeri eq(); ile seçtik. Sonra bu seçilen değeri yarım saniye ile değişmek şartı ile önce gizledik sonrasında ise tekrar gösterdik. Bu işlemi saniyenin 1/4 ‘ünde gerçekleştirdik.
Sonuç olarak; Biraz kaba bir yapıda da olsa yanıp sönen bir yazı oluşturmuş olduk. Bunu sadece yazılarda değil oluşturduğunuz butonlarda da kullanabilirsiniz. Yani biraz yaratıcılık şart!
