Cara Menambah Efek Blink Pada Teks atau Image

Blinking Teks atau Image adalah efek kedipan yang bisa diterapkan pada objek berupa teks atau image yang bertujuan untuk menarik perhatian visitor agar lebih memperhatikan objek yang dimaksud. Untuk menerapkan efek kedipan ini saya gunakan jquery karena penggunaan tag <blink> dan </blink> sudah tidak releven atau tidak berfungsi lagi pada saat ini.

Cukup dengan menambahkan sebuah plugin dengan ukuran sangat kecil dan ringan, sehingga tidak mempengaruhi kecepatan loading pada blog atau website anda. Efek blink ini akan berhenti jika disorot oleh mouse dan jika dilepas maka akan berkedip lagi serta kecepatan berkedip yang berbeda pada masing-masing objek.

Untuk menerapkannya, cukup tambahkan jquery dibawah ini tepat diatas </body>.

<script type='text/javascript'>

/*<![CDATA[*/

(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();

        });

    });



$(document).ready(function()

{

        $('.blink2').blink({delay:900});



        $('.blink2').mouseover(function(){

            $(this).stop().unblink();

        });

        $('.blink2').mouseout(function(){

            $(this).blink();

        });

    });

/*]]>*/

</script>

Kecapatan berkedip bisa daiatur dengan merubah nilai 500 dan 900 pada script diatas.
Penempatan pada teks atau image yang akan diterapkan efek blink dengan cara menambah class="blink" seperti contoh dibawah.

<div class="blink">

Teks atau link image berkedip

</div>

Dan class="blink2" pada objek berkedip kedua.

<div class="blink2">

Teks atau link image berkedip kedua

</div>

Silahkan terapkan dengan benar dan lihat hasilnya.

Jika hanya ingain menarapkan efek kedip tanpa hover mouse, maka jquery-nya pakai seperti contoh dibawah.

<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:900})})

//]]>

</script>

Jika hanya ingin menerapkan pada satu objek, maka jquery yang di teks box merah bisa dihapus.
Saya rasa hanya itu saja yang dapat saya bagikan, bisa tinggalkan pesan apabila ada yang kurang jelas.