14.9.14
10
Membuat Teks Berkedip Dengan Animasi Blink - Elemen blink digunakan untuk membuat teks berkedip, namun efek ini tidak dapat bekerja pada semua vendor browser. Kita buat contoh seperti ini misalnya:


<blink>SAHABAT BLOGGER 77</blink>

Coba lihat hasil tampilannya pada browser chrome, teks tidak berkedip seperti yang kita harapkan, tetapi elemen ini masih dapat bekerja pada M.fx (Mozilla Firefox pada versi-versi tertentu). Membuat penasaran, mencari tahu apa sih penyebabnya?, dan alhamdulillah sampai sekarang saya belum menemukan solusinya,hehe..!! mungkin sahabat setia pecinta SAHABAT BLOGGER 77 dapat membantu rasa penasaran ini, Devy tunggu ya di kolom komentar.

Sambil menunggu pemecahan masalah ini, Membuat teks berkedip tidak harus selalu dengan elemen blink, Anda bisa membuatnya dengan penggunaan CSS untuk memainkan peran warna menggunakan efek animasi seperti ini:

<style type="text/css">
.anim-blink {
  color: white;
  margin:0 auto;
  font-size: 55px;
  position: relative;}

@keyframes noise-anim {
  0% {clip: rect(3px, 9999px, 77px, 0);}
  5% {clip: rect(92px, 9999px, 90px, 0);}
  10% {clip: rect(20px, 9999px, 53px, 0);}
  15.0% {clip: rect(49px, 9999px, 67px, 0);}
  20% {clip: rect(98px, 9999px, 83px, 0);}
  25% {clip: rect(81px, 9999px, 18px, 0);}
  30.0% {clip: rect(79px, 9999px, 34px, 0);}
  35% {clip: rect(33px, 9999px, 33px, 0);}
  40% {clip: rect(3px, 9999px, 48px, 0);}
  45% {clip: rect(30px, 9999px, 65px, 0);}
  50% {clip: rect(59px, 9999px, 34px, 0);}
  55.0% {clip: rect(59px, 9999px, 70px, 0);}
  60.0% {clip: rect(22px, 9999px, 49px, 0);}
  65% {clip: rect(1px, 9999px, 51px, 0);}
  70% {clip: rect(76px, 9999px, 88px, 0);}
  75% {clip: rect(49px, 9999px, 75px, 0);}
  80% {clip: rect(74px, 9999px, 84px, 0);}
  85.0% {clip: rect(95px, 9999px, 76px, 0);}
  90% {clip: rect(97px, 9999px, 1px, 0);}
  95% {clip: rect(91px, 9999px, 89px, 0);}
  100% {clip: rect(15px, 9999px, 17px, 0);}}

.anim-blink:after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -3px 5px red;
  top: 0;
  color: white;
  background: transparent;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim 2s infinite linear alternate-reverse;}

@keyframes noise-anim-2 {
  0% {clip: rect(99px, 9999px, 75px, 0);}
  5% {clip: rect(27px, 9999px, 55px, 0);}
  10% {clip: rect(2px, 9999px, 33px, 0);}
  15.0% {clip: rect(75px, 9999px, 57px, 0);}
  20% {clip: rect(12px, 9999px, 84px, 0);}
  25% {clip: rect(98px, 9999px, 13px, 0);}
  30.0% {clip: rect(50px, 9999px, 25px, 0);}
  35% {clip: rect(70px, 9999px, 48px, 0);}
  40% {clip: rect(71px, 9999px, 8px, 0);}
  45% {clip: rect(8px, 9999px, 99px, 0);}
  50% {clip: rect(11px, 9999px, 2px, 0);}
  55.0% {clip: rect(33px, 9999px, 49px, 0);}
  60.0% {clip: rect(74px, 9999px, 86px, 0);}
  65% {clip: rect(52px, 9999px, 62px, 0);}
  70% {clip: rect(30px, 9999px, 88px, 0);}
  75% {clip: rect(46px, 9999px, 14px, 0);}
  80% {clip: rect(86px, 9999px, 68px, 0);}
  85.0% {clip: rect(42px, 9999px, 24px, 0);}
  90% {clip: rect(91px, 9999px, 57px, 0);}
  95% {clip: rect(57px, 9999px, 60px, 0);}
  100% {clip: rect(78px, 9999px, 67px, 0);}}

.anim-blink:before {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  text-shadow: 3px 5px #39f;
  top: 0;
  color: white;
  background: transparent;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim-2 3s infinite linear alternate-reverse;}
</style>
<div class="anim-blink" data-text="SAHABAT BLOGGER 77">
SAHABAT BLOGGER 77</div>




DEMO SHOW




Walau tidak seindah tampilan blink, tetapi hasilnya lumayan cantik dan keren bukan..!! Karena disana kita hanya membuat ilustrasi untuk memanipulasi pergantian warna dengan pengaturan nilai-nilai pada ►text-shadow, seperti saat Anda Menciptakan Efek Pelangi Pada Text.

Fungsinya bisa Anda jadikan untuk membuat "BANNER LINK" atau untuk membuat rasa ketertarikan pembaca dengan membuat teks berkedip pada judul widget di blog Anda.

Selamat berinovasi ya..!! happy blogging.

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Teks Berkedip Dengan Animasi Blink
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

10 komentar

  1. simpel sih, tapi bisa membuat blog tambah enak dipandang

    BalasHapus
  2. Boleh juga nih saya coba coba hehe

    BalasHapus
  3. weii cantiknya.. bagian teks berkedip bisa beberapa teks ga ..? kodenya disimpen dimana? makasih...

    BalasHapus
    Balasan
    1. [pre]<style type="text-css">
      ....
      Kode CSS disini
      ...
      </style>[/pre]

      lalu untuk HTML bisa digandakan seperti ini

      [pre]<div class="anim-blink" data-text="content [attr]">
      YOUR TEXT
      </div>
      ....
      <div class="anim-blink" data-text="content [attr]">
      YOUR TEXT-2
      </div>
      //dan seterusnya..[/pre]

      untuk menerapkannya, letakkan dimana mbak ingin menampilkannya, jika pada sidebar maka letakkan kodenya pada formulir HTML/javascript widget-gadget

      Hapus
  4. ooo..memang penah ingin terapkan untuk judul tertentu tp nda ada efek..
    untuk html pemanggil untuk css di atas, kalau misalkan kita ingin menampilkan efek ke judul widget tertentu di sidebar apa Mba Dev..!?

    BalasHapus
    Balasan
    1. mungkin mas saat ini menggunakan mozilla, dan saya menggunakan chrome, dan mereka yang lain bisa saja menggunakan Opera. jadi kita perlu mendapatkan dukungan untuk semua vendor browser agar efek dapat bekerja seperti ini:

      [pre]@-webkit- (YOUR NAME ANIMASI)
      @-moz- (YOUR NAME ANIMASI)
      @-o- (YOUR NAME ANIMASI)
      @-ms- (YOUR NAME ANIMASI)
      filter- (YOUR NAME ANIMASI)[/pre]

      jika untuk judul sidebar, mas temukan dulu HTML untuk tampilan judul widget, jika sudah ketemu, cukup hapus elemen kelasnya dan gantikan dengan kelas CSS ini.

      Hapus
  5. mantap info nya gan
    kunjungi kami di www.168sdbet.com

    BalasHapus
  6. berkunjung :) blog yang keyen :) :) (h) salam kenal untuk admin.....

    BalasHapus
  7. keren juga ya teks kedap kedip nya, bisa buat hiasan blog agar makin tampil cantik dan menarik, hanya saja untuk bikin nya yang sulit ya kak :)

    BalasHapus
    Balasan
    1. bukan sulit lagi mbak, tetapi buat 1 efek aja butuh 2 hari baru kelar, hehe..

      belum mahir banget mbak, dalam tahap pembelajaran

      Hapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK