Beberapa saat lalu, saya telah meluncurkan update untuk Textrim free Blogger theme. Salah satu fitur yang ada di versi terbaru adalah efek glitch atau grunge pada teks di judul blog dan di judul artikel saat disorot (hover). Pro kontra sih, ada yang suka karena itu termasuk hal yang baru, ada juga yang kurang suka karena malah bikin pusing. Selera tiap orang memang berbeda. Yang penting bisa dipasang atau dilepas sesuai keinginan.
Perlu engkau tahu nih, dampak animasi berkecimpung tersebut hanya dibuat menggunakan CSS saja lho. Tidak perlu tuh Javascript segala. Jadi telah pasti ringan dan support AMP. Kalau mau coba, blog igniel.Com akan mengembangkan kodenya menggunakan engkau semua. Glitch ini misalnya bayangan yang bergetar memakai cepat, kaya tampilan TV jadul yang rusak.
Efek Text Bergerak Glitch (Grunge) menggunakan Animasi CSS
- Langsung default
- Saat disorot (hover)
1. Langsung Default
/* Text Glitch (Grunge) Effect by igniel.Com */ .IgnielGlitch color:
#000; position: relative; animation: ignielGlitch1
2.5s
infinite; -moz-animation: ignielGlitch1
2.5s
infinite; -webkit-animation: ignielGlitch1
2.5s
infinite; -o-animation: ignielGlitch1
2.5s
infinite; .IgnielGlitch:before, .IgnielGlitch:after content: attr(data-text); position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; .IgnielGlitch:before color:
#000; animation: ignielGlitch2
2.5s
infinite; -moz-animation: ignielGlitch2
2.5s
infinite; -webkit-animation: ignielGlitch2
2.5s
infinite; -o-animation: ignielGlitch2
2.5s
infinite; .IgnielGlitch:after color:
#000; animation: ignielGlitch3
2.5s
infinite; -moz-animation: ignielGlitch3
2.5s
infinite; -webkit-animation: ignielGlitch3
2.5s
infinite; -o-animation: ignielGlitch3
2.5s
infinite; @keyframes ignielGlitch10% transform: none;opacity: 1;7% transform: skew(-0.5deg, -0.9deg);opacity: 0.75;10% transform: none;opacity: 1;27% transform: none;opacity: 1;30% transform: skew(0.8deg, -0.1deg);opacity: 0.75;35% transform: none;opacity: 1;52% transform: none;opacity: 1;55% transform: skew(-1deg, 0.2deg);opacity: 0.75;50% transform: none;opacity: 1;72% transform: none;opacity: 1;75% transform: skew(0.4deg, 1deg);opacity: 0.75;80% transform: none;opacity: 1;100% transform: none;opacity: 1; @-webkit-keyframes ignielGlitch10% transform: none;opacity: 1;7% transform: skew(-0.5deg, -0.9deg);opacity: 0.75;10% transform: none;opacity: 1;27% transform: none;opacity: 1;30% transform: skew(0.8deg, -0.1deg);opacity: 0.75;35% transform: none;opacity: 1;52% transform: none;opacity: 1;55% transform: skew(-1deg, 0.2deg);opacity: 0.75;50% transform: none;opacity: 1;72% transform: none;opacity: 1;75% transform: skew(0.4deg, 1deg);opacity: 0.75;80% transform: none;opacity: 1;100% transform: none;opacity: 1; @keyframes ignielGlitch20% transform: none;opacity: 0.25;7% transform: translate(-2px, -3px);opacity: 0.Lima;10% transform: none;opacity: 0.25;27% transform: none;opacity: 0.25;30% transform: translate(-5px, -2px);opacity: 0.Lima;35% transform: none;opacity: 0.25;52% transform: none;opacity: 0.25;55% transform: translate(-5px, -1px);opacity: 0.Lima;50% transform: none;opacity: 0.25;72% transform: none;opacity: 0.25;75% transform: translate(-2px, -6px);opacity: 0.Lima;80% transform: none;opacity: 0.25;100% transform: none;opacity: 0.25; @-webkit-keyframes ignielGlitch20% transform: none;opacity: 0.25;7% transform: translate(-2px, -3px);opacity: 0.Lima;10% transform: none;opacity: 0.25;27% transform: none;opacity: 0.25;30% transform: translate(-5px, -2px);opacity: 0.5;35% transform: none;opacity: 0.25;52% transform: none;opacity: 0.25;55% transform: translate(-5px, -1px);opacity: 0.Lima;50% transform: none;opacity: 0.25;72% transform: none;opacity: 0.25;75% transform: translate(-2px, -6px);opacity: 0.5;80% transform: none;opacity: 0.25;100% transform: none;opacity: 0.25; @keyframes ignielGlitch30% transform: none;opacity: 0.25;7% transform: translate(2px, 3px);opacity: 0.5;10% transform: none;opacity: 0.25;27% transform: none;opacity: 0.25;30% transform: translate(5px, 2px);opacity: 0.Lima;35% transform: none;opacity: 0.25;52% transform: none;opacity: 0.25;55% transform: translate(5px, 1px);opacity: 0.5;50% transform: none;opacity: 0.25;72% transform: none;opacity: 0.25;75% transform: translate(2px, 6px);opacity: 0.Lima;80% transform: none;opacity: 0.25;100% transform: none;opacity: 0.25; @-webkit-keyframes ignielGlitch30% transform: none;opacity: 0.25;7% transform: translate(2px, 3px);opacity: 0.5;10% transform: none;opacity: 0.25;27% transform: none;opacity: 0.25;30% transform: translate(5px, 2px);opacity: 0.Lima;35% transform: none;opacity: 0.25;52% transform: none;opacity: 0.25;55% transform: translate(5px, 1px);opacity: 0.Lima;50% transform: none;opacity: 0.25;72% transform: none;opacity: 0.25;75% transform: translate(2px, 6px);opacity: 0.Lima;80% transform: none;opacity: 0.25;100% transform: none;opacity: 0.25;
Yang ditandai 2.5s adalah kecepatan dari pergerakan efek glitch. Semakin besar angkanya, semakin lambat gerakannya. Silakan ganti sesuai selera.
<!-- Text Glitch (Grunge) Effect by igniel.com --> <div class="ignielGlitch"
data-text="Textrim">Textrim</div>
- Yang ditandai data-text="Textrim" WAJIB harus ditambahkan. Isi atau value-nya harus sama persis dengan teks yang ingin ditampilkan. Pada kode di atas, isi elemen div adalah Textrim. Maka value data-text pun harus diisi Textrim.
- Yang ditandai #000 adalah warna teks. Ketiganya bisa diatur berbeda-beda agar bayangan yang timbul pun lebih berwarna-warni.
1.1. Demo / Preview
TEXTRIM
IGNIEL
2. Saat Disorot (Hover)
/* Text Glitch (Grunge) Effect on Hover by igniel.com */ .ignielGlitch:hover { color:
#000; position: relative; animation: ignielGlitch1
2.5s
infinite; -moz-animation: ignielGlitch1
2.5s
infinite; -webkit-animation: ignielGlitch1
2.5s
infinite; -o-animation: ignielGlitch1
2.5s
infinite; } .ignielGlitch:hover::before, .ignielGlitch:hover::after { content: attr(data-text); position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; } .ignielGlitch:hover::before { color:
#000; animation: ignielGlitch2
2.5s
infinite; -moz-animation: ignielGlitch2
2.5s
infinite; -webkit-animation: ignielGlitch2
2.5s
infinite; -o-animation: ignielGlitch2
2.5s
infinite; } .ignielGlitch:hover::after { color:
#000; animation: ignielGlitch3
2.5s
infinite; -moz-animation: ignielGlitch3
2.5s
infinite; -webkit-animation: ignielGlitch3
2.5s
infinite; -o-animation: ignielGlitch3
2.5s
infinite; @keyframes ignielGlitch10% transform: none;opacity: 1;7% transform: skew(-0.5deg, -0.9deg);opacity: 0.75;10% transform: none;opacity: 1;27% transform: none;opacity: 1;30% transform: skew(0.8deg, -0.1deg);opacity: 0.75;35% transform: none;opacity: 1;52% transform: none;opacity: 1;55% transform: skew(-1deg, 0.2deg);opacity: 0.75;50% transform: none;opacity: 1;72% transform: none;opacity: 1;75% transform: skew(0.4deg, 1deg);opacity: 0.75;80% transform: none;opacity: 1;100% transform: none;opacity: 1; @-webkit-keyframes ignielGlitch10% transform: none;opacity: 1;7% transform: skew(-0.5deg, -0.9deg);opacity: 0.75;10% transform: none;opacity: 1;27% transform: none;opacity: 1;30% transform: skew(0.8deg, -0.1deg);opacity: 0.75;35% transform: none;opacity: 1;52% transform: none;opacity: 1;55% transform: skew(-1deg, 0.2deg);opacity: 0.75;50% transform: none;opacity: 1;72% transform: none;opacity: 1;75% transform: skew(0.4deg, 1deg);opacity: 0.75;80% transform: none;opacity: 1;100% transform: none;opacity: 1; @keyframes ignielGlitch20% transform: none;opacity: 0.25;7% transform: translate(-2px, -3px);opacity: 0.Lima;10% transform: none;opacity: 0.25;27% transform: none;opacity: 0.25;30% transform: translate(-5px, -2px);opacity: 0.Lima;35% transform: none;opacity: 0.25;52% transform: none;opacity: 0.25;55% transform: translate(-5px, -1px);opacity: 0.Lima;50% transform: none;opacity: 0.25;72% transform: none;opacity: 0.25;75% transform: translate(-2px, -6px);opacity: 0.Lima;80% transform: none;opacity: 0.25;100% transform: none;opacity: 0.25; @-webkit-keyframes ignielGlitch20% transform: none;opacity: 0.25;7% transform: translate(-2px, -3px);opacity: 0.Lima;10% transform: none;opacity: 0.25;27% transform: none;opacity: 0.25;30% transform: translate(-5px, -2px);opacity: 0.5;35% transform: none;opacity: 0.25;52% transform: none;opacity: 0.25;55% transform: translate(-5px, -1px);opacity: 0.Lima;50% transform: none;opacity: 0.25;72% transform: none;opacity: 0.25;75% transform: translate(-2px, -6px);opacity: 0.5;80% transform: none;opacity: 0.25;100% transform: none;opacity: 0.25; @keyframes ignielGlitch30% transform: none;opacity: 0.25;7% transform: translate(2px, 3px);opacity: 0.5;10% transform: none;opacity: 0.25;27% transform: none;opacity: 0.25;30% transform: translate(5px, 2px);opacity: 0.Lima;35% transform: none;opacity: 0.25;52% transform: none;opacity: 0.25;55% transform: translate(5px, 1px);opacity: 0.5;50% transform: none;opacity: 0.25;72% transform: none;opacity: 0.25;75% transform: translate(2px, 6px);opacity: 0.Lima;80% transform: none;opacity: 0.25;100% transform: none;opacity: 0.25; @-webkit-keyframes ignielGlitch30% transform: none;opacity: 0.25;7% transform: translate(2px, 3px);opacity: 0.5;10% transform: none;opacity: 0.25;27% transform: none;opacity: 0.25;30% transform: translate(5px, 2px);opacity: 0.Lima;35% transform: none;opacity: 0.25;52% transform: none;opacity: 0.25;55% transform: translate(5px, 1px);opacity: 0.Lima;50% transform: none;opacity: 0.25;72% transform: none;opacity: 0.25;75% transform: translate(2px, 6px);opacity: 0.Lima;80% transform: none;opacity: 0.25;100% transform: none;opacity: 0.25;
<!-- Text Glitch (Grunge) Effect on Hover by igniel.com --> <div class="ignielGlitch"
data-text="Textrim">Textrim</div>
2.1. Demo / Preview
HOVER ME
SOROT AKU
Udah deh. Sekarang kamu bisa membuat teks efek glitch grunge animasi CSS seperti Igniel di template Textrim. Hanya gunakan seperlunya ya. Karena kalau kebanyakan malah bikin pusing pembaca.
Kali ini saya mencoba untuk membedakan warnanya agar efek bayangan yang dihasilkan lebih berwarna-warni.
Lalu kode HTMLnya pun sama saja sih. Yang ditandai value-nya harus sama dengan isi teks dalam elemen div.
Untuk pengaturan kecepatan dan warna yang ditandai tidak ada yang berbeda. Semua sama saja seperti versi pertama.
Text glitch / grunge effect on hover ini baru akan keluar ketika mouse sedang menyoroti tulisan. Kode CSSnya adalah sebagai berikut:
Jika sukses, hasilnya akan seperti ini.
Setelah itu, kita buat sebuah elemen HTML baru untuk memanggil efek glitch tersebut. Pastikan untuk menambahkan class ignielGlitch ke dalamnya. Contohnya seperti ini:
Kamu bisa menambahkan pengaturan lain seperti ukuran font, jenis font, ketebalan font, dan lain sebagainya.
Pertama, tambahkan dulu kode CSS glitch untuk menciptakan efek animasi bergerak. Salin kode berikut dan simpan di pengaturan HTML.
Kita akan membuat 2 jenis efek glitch, yaitu:
