Membuat Teks Berkedip Dengan Jquery

Membuat Teks Berkedip Dengan Jquery - Teks berkedip atau blinking text dapat kita gunakan biar pengunjung lebih memperhatikan sebuah teks yang kita maksud. Bisa saja teks tersebut merupakan info penting untuk para pengunjung.

Dulu dikala awal ngeblog sekitar tahun 2012, menciptakan teks berkedip sangatlah mudah. Dengan memakai tag <blink> maka teks yang dimaksud dapat berkedip. Namun sekarang tag <blink> ini sudah tidak dapat dipakai lagi.

Untuk itu aku mencoba mencari cara untuk menciptakan teks berkedip dan menemukan sebuah plugin yang dapat kita gunakan untuk menciptakan blinking teks. Plugin ini cukup kecil sehingga tidak akan terlalu memberatkan loading blog. Untuk itu aku buat inline jquery-nya biar menjadi tambah ringan.

Untuk membuatnya silahkan gunakan jquery di bawah ini dan simpan di atas arahan </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 arahan angka 500 di atas.

Kemudian tambahkan class blink pada teks yang dimaksud ibarat pola di bawah ini.

 <div class="blink">
 Ini yaitu pola teks berkedip
 </div>

Jika ingin menciptakan kecepatan berkedip yang berbeda pada teks lainnya, silahkan buat class yang berbeda dan tambahkan angka yang berbeda pada delay ibarat pada arahan yang aku marking di bawah ini. Sehingga jquerynya menjadi ibarat 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 yaitu pola teks berkedip
 </div>
 dan ini
 <div class="blink2">
 teks berkedip dengan kecepatan berbeda
 </div>

Praktis bukan? Selamat mencoba...

Update:
Jika ingin menciptakan berhenti berkedip dikala di-hover dan berkedip lagi dikala hover dilepas ibarat pola 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

Sumber https://www.kompiajaib.com/

Share this post