Ditulis oleh: Ditulis pada: 11/20/2014
Membuat Teks Berkedip Dengan Jquery - Teks berkedip atau blinking text bisa kita gunakan agar pengunjung lebih memperhatikan sebuah teks yang kita maksud. Bisa saja teks tersebut merupakan informasi penting untuk para pengunjung.
Dulu ketika awal ngeblog sekitar tahun 2012, membuat teks berkedip sangatlah mudah. Dengan menggunakan tag
<blink> maka teks yang dimaksud bisa berkedip. Namun kini tag <blink> ini sudah tidak bisa digunakan lagi.
Untuk itu saya mencoba mencari cara untuk membuat teks berkedip dan menemukan sebuah plugin yang bisa kita gunakan untuk membuat blinking teks. Plugin ini cukup kecil sehingga tidak akan terlalu memberatkan loading blog. Untuk itu saya buat inline jquery-nya agar menjadi tambah ringan.
Untuk membuatnya silahkan gunakan jquery di bawah ini dan simpan di atas kode
</body>
<script type="text/javascript">
//<![CDATA[
(function(e){e.fn.blink=function(t){var n={delay:500};var t=e.extend(n,t);return this.each(function(){var n=e(this);setInterval(function(){if(e(n).css("visibility")=="visible"){e(n).css("visibility","hidden")}else{e(n).css("visibility","visible")}},t.delay)})}})(jQuery);$(document).ready(function(){$(".blink").blink()})
//]]>
</script>
Untuk mengatur kecepatannya, silahkan atur pada kode angka
500 di atas.
Kemudian tambahkan class
blink pada teks yang dimaksud seperti contoh di bawah ini.
<div class="blink">
Ini adalah contoh teks berkedip
</div>
Jika ingin membuat kecepatan berkedip yang berbeda pada teks lainnya, silahkan buat class yang berbeda dan tambahkan angka yang berbeda pada
delay seperti pada kode yang saya marking di bawah ini. Sehingga jquerynya menjadi seperti di bawah ini.
<script type="text/javascript">
//<![CDATA[
(function(e){e.fn.blink=function(t){var n={delay:500};var t=e.extend(n,t);return this.each(function(){var n=e(this);setInterval(function(){if(e(n).css("visibility")=="visible"){e(n).css("visibility","hidden")}else{e(n).css("visibility","visible")}},t.delay)})}})(jQuery);$(document).ready(function(){$(".blink").blink();$('.blink2').blink({delay:200})})
//]]>
</script>
<div class="blink">
Ini adalah contoh teks berkedip
</div>
dan ini
<div class="blink2">
teks berkedip dengan kecepatan berbeda
</div>
Mudah bukan? Selamat mencoba...
Update:
Jika ingin membuat berhenti berkedip ketika di-hover dan berkedip lagi ketika hover dilepas seperti contoh di atas, silahkan gunakan jquery di bawah ini.
Jika ingin membuat berhenti berkedip ketika di-hover dan berkedip lagi ketika hover dilepas seperti contoh di atas, silahkan gunakan jquery di bawah ini.
(function($)
{
$.fn.blink = function(options)
{
var defaults = { delay:500 };
var options = $.extend(defaults, options);
return this.each(function()
{
var obj = $(this);
if (obj.attr("timerid") > 0) return;
var timerid=setInterval(function()
{
if($(obj).css("visibility") == "visible")
{
$(obj).css('visibility','hidden');
}
else
{
$(obj).css('visibility','visible');
}
}, options.delay);
obj.attr("timerid", timerid);
});
}
$.fn.unblink = function(options)
{
var defaults = { visible:true };
var options = $.extend(defaults, options);
return this.each(function()
{
var obj = $(this);
if (obj.attr("timerid") > 0)
{
clearInterval(obj.attr("timerid"));
obj.attr("timerid", 0);
obj.css('visibility', options.visible?'visible':'hidden');
}
});
}
}(jQuery))
$(document).ready(function()
{
$('.blink').blink();
$('.blink').mouseover(function(){
$(this).stop().unblink();
});
$('.blink').mouseout(function(){
$(this).blink();
});
});
Source code: http://www.antiyes.com/jquery-blink-plugin