Skip to main content

Membuat 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.

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.

(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

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:

PrivacySitemap
©2021 KOMPI AJAIB