Membuat Teks Berkedip Dengan Jquery

Teks Berkedip Dengan Jquery
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.

Sebagai contoh, di bawah ini adalah live demo untuk blinking text atau teks berkedip.


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>

Ini adalah contoh teks berkedip dan ini teks berkedip dengan kecepatan berbeda


<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:
Contoh: Silahkan hover teks 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

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments