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:
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:
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.
<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>
.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>
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 >>
simpel sih, tapi bisa membuat blog tambah enak dipandang
BalasHapusBoleh juga nih saya coba coba hehe
BalasHapusweii cantiknya.. bagian teks berkedip bisa beberapa teks ga ..? kodenya disimpen dimana? makasih...
BalasHapus[pre]<style type="text-css">
Hapus....
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
ooo..memang penah ingin terapkan untuk judul tertentu tp nda ada efek..
BalasHapusuntuk html pemanggil untuk css di atas, kalau misalkan kita ingin menampilkan efek ke judul widget tertentu di sidebar apa Mba Dev..!?
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:
Hapus[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.
mantap info nya gan
BalasHapuskunjungi kami di www.168sdbet.com
berkunjung :) blog yang keyen :) :) (h) salam kenal untuk admin.....
BalasHapuskeren 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 :)
BalasHapusbukan sulit lagi mbak, tetapi buat 1 efek aja butuh 2 hari baru kelar, hehe..
Hapusbelum mahir banget mbak, dalam tahap pembelajaran