Membuat Teks Berkedip Dengan Jquery

Membuat Teks Berkedip Dengan Jquery

Bola Hero Gawai

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

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×