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 kamu tahu nih, efek animasi bergerak tersebut hanya dibuat menggunakan CSS saja lho. Tidak perlu tuh Javascript segala. Jadi sudah pasti ringan dan support AMP. Kalau mau coba, blog igniel.com akan berbagi kodenya dengan kamu semua. Glitch ini seperti bayangan yang bergetar dengan cepat, kaya tampilan TV jadul yang rusak.
Efek Text Bergerak Glitch (Grunge) dengan Animasi CSS
Kita akan membuat 2 jenis efek glitch, yaitu:
- Langsung default
- Saat disorot (hover)
1. Langsung Default
Pertama, tambahkan dulu kode CSS glitch untuk menciptakan efek animasi bergerak. Salin kode berikut dan simpan di pengaturan HTML.
/* 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 ignielGlitch1{0% {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 ignielGlitch1{0% {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 ignielGlitch2{0% {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.5;}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.5;}80% {transform: none;opacity: 0.25;}100% {transform: none;opacity: 0.25;}}
@-webkit-keyframes ignielGlitch2{0% {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.5;}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.5;}80% {transform: none;opacity: 0.25;}100% {transform: none;opacity: 0.25;}}
@keyframes ignielGlitch3{0% {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.5;}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.5;}80% {transform: none;opacity: 0.25;}100% {transform: none;opacity: 0.25;}}
@-webkit-keyframes ignielGlitch3{0% {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.5;}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.5;}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.
Kamu bisa menambahkan pengaturan lain seperti ukuran font, jenis font, ketebalan font, dan lain sebagainya.
Setelah itu, kita buat sebuah elemen HTML baru untuk memanggil efek glitch tersebut. Pastikan untuk menambahkan class ignielGlitch ke dalamnya. Contohnya seperti ini:
<!-- 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
Jika sukses, hasilnya akan seperti ini.
2. Saat Disorot (Hover)
Text glitch / grunge effect on hover ini baru akan keluar ketika mouse sedang menyoroti tulisan. Kode CSSnya adalah sebagai berikut:
/* 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 ignielGlitch1{0% {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 ignielGlitch1{0% {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 ignielGlitch2{0% {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.5;}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.5;}80% {transform: none;opacity: 0.25;}100% {transform: none;opacity: 0.25;}}
@-webkit-keyframes ignielGlitch2{0% {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.5;}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.5;}80% {transform: none;opacity: 0.25;}100% {transform: none;opacity: 0.25;}}
@keyframes ignielGlitch3{0% {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.5;}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.5;}80% {transform: none;opacity: 0.25;}100% {transform: none;opacity: 0.25;}}
@-webkit-keyframes ignielGlitch3{0% {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.5;}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.5;}80% {transform: none;opacity: 0.25;}100% {transform: none;opacity: 0.25;}}Untuk pengaturan kecepatan dan warna yang ditandai tidak ada yang berbeda. Semua sama saja seperti versi pertama.
Lalu kode HTMLnya pun sama saja sih. Yang ditandai value-nya harus sama dengan isi teks dalam elemen div.
<!-- Text Glitch (Grunge) Effect on Hover by igniel.com -->
<div class="ignielGlitch" data-text="Textrim">Textrim</div>2.1. Demo / Preview
Kali ini saya mencoba untuk membedakan warnanya agar efek bayangan yang dihasilkan lebih berwarna-warni.
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.