Yeni bir makale ile tekrar merhaba.

Bu makalemizdeki mevzu, başlıktan da kısmen anlaşılacağı üzere jQuery için yazdığım bir Marquee eklentisi üzerine.

Üzerinde çalıştığım bir projede ihtiyacım olduğunda, klasik Marquee etiketinin obsolete -modası geçmiş- olarak işaretlendiğini ve muhtemelen birkaç sene içinde tarayıcı desteğinin de yok olacağını görünce, bu işi yapacak jQuery plugin arama yoluna gittim. Ancak, karşıma çok güzel eklentiler çıkmış olmakla beraber, biri müstesna, hiçbiri işimi görmedi. İstisnaî olan ise maalesef hata barındırıyordu. Bundan dolayı kendi jQuery plugin dosyamı oluşturup kullanmayı tercih ettim.

Yazdığım plugin şu an gayet güzel şekilde çalışıyor. İhtiyaç duyanların istifadesine de sunuyorum.

(Dosyayı, makalenin sonundaki Github adresinden indirebilirsiniz.)

Şimdi de dilerseniz kısaca nasıl kullanılacağını anlatalım.

İndirdiğiniz dosyayı web projenize jQuery dosyasından sonra referans olarak ekleyip, aşağıdaki gibi bir kod yazarak, eklentiyi çalıştırabilirsiniz.
 

// Varsayılan parametreler
$(".marqueeElement").SSMarquee();

// Tercihe göre değiştirilmiş parametreler
$(".marqueeElement").SSMarquee({ direction: "bottom", speed: 30, scrollAmount: 1.2, pauseOnHover: false, bufferSize: 20 });

İkinci kullanım şeklinden de anlaşılacağı üzere, kullanabileceğiniz 5 adet parametre mevcut:

direction: String tipinde değer alır. Alabileceği değerler: "top", "bottom","left", "right". Aldığı değerde belirtilen yöne hareket eder. Değer verilmezse ya da yanlış bir değer gönderilirse, "top" olarak ayarlanır.

speed: Milisaniye cinsinden hız. Integer tipinde değer alır. 10 ile 70 aralığında olmalıdır. Asgarî değerden küçük bir değer verildiğinde asgarî değere, azamî değerden büyük bir değer verildiğinde ise, azamî değere ayarlanır. Geçersiz bir değer verildiğinde varsayılan değer olarak 45 verilir.

scrollAmount: Her bir harekette, nesnenin kayacağı px miktarıdır. Float tipinde değer alır. Sıfıra eşit, sıfırdan küçük ya da geçersiz bir değer girilirse, varsayılan değer olan 1 olarak ayarlanır.

pauseOnHover: Nesne üzerine gelindiğinde duraklama olup olmayacağını belirlemek üzere, boolean tipinde bir değer alır. Varsayılan değeri true'dur. Geçersiz bir değer girildiğinde varsayılan değer ayarlanır.

bufferSize: Nesnenin gizlenmesi ile tekrar görünmesi arasında geçen süreyi uzatabilmek için eklenen, Integer tipinde px cinsinden değer. Girilen değer büyüdükçe, gizlenme ve tekrar görünme arasındaki süre de uzar. Geçersiz ya da sıfırdan küçük bir değer girilirse, varsayılan değer olan 10 olarak ayarlanır.

Bunların yanısıra, responsive sitelerde ya da ekranın yeniden boyutlandırılmasında rahat kullanılabilmesi için gerekli destek mevcuttur. Ekran boyutu her değiştiğinde marquee baştan başlar.

Kullanım için dikkat edilmesi gereken tek bir nokta mevcut. Bu eklentiyi tatbik edeceğiniz nesnenin içinde sadece bir element olmalıdır. Onun içine istediğiniz herşeyi koyabilirsiniz.

Örnek için şu adrese bakabilirsiniz:

jQuery.SSMarquee Örnek

Projeyi GitHub üzerinden yayınladım. Projenin hem sıkıştırılmış hem de normal hâli mevcut. Adrese ulaşmak için, buraya tıklayabilir ve açılan sayfadan istediğiniz dosyayı indirebilirsiniz. 

Şimdilik bu kadar...

Hoşçakalın.