Cara Membuat Effect Animasi Glitch dengan CSS di Blogger

Jagoandzgn.com - Pada artikel kali ini saya akan membagikan tutorial bagaimana Cara Membuat Effect Animasi Glitch dengan CSS di Blogger seperti di template textrim, ini merupakan fitur yang sangat unik dan menarik bagi kamu yang menginginkan suatu kata yang bergerak-gerak. Pro dan Kontrak pastinya ada, ada yang menyukainya sesuatu yang baru dan ada  juga yang kurang menyukainya yang membuat kepala menjadi pusing saat dilihat.

Apa Itu Glitch ?

Glitch adalah suatu fitur atau gangguan software yang sering disebabkan oleh sinyal yang rusak yang hasil akhirnya manjadikan monitor anda tiba-tiba berubah dan sulit dilihat ( bergerak-gerak ).

Perlu kamu ketahui, Effect Animasi Glitch hanya menggunakan CSS saja loh jadi tidak terpengaruh dengan kecepatan blog, dan effect ini tidak menggunakan javascript atau yang lainnya, yang membuat template menjadi berat. Effect ini support untuk kamu pengguna AMP jadi pastinya akan ringan dan membuat tampilan menjadi baru.

Cara Membuat Effect Animasi Glitch dengan CSS di Blogger

Pada artikel kali ini kita hanya akan membuat 2 jenis effect saja, yaitu :
1. Langsung Default
2. Saat disorot [Hover]

1. Langsung Default

Buka Blogger > Tema > Edit HTML > Tambahkan  kode berikut tepat diatas kode </style>

/* Text Glitch (Grunge) Effect */
.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 di seleksi 2.5s merupakan kecepatan dari pergerakan efek glitch, semakin besar angkanya semakin lambat gerakannya. Ganti sesuai keinginan kalian.

Kemudian kita membuat element HTML untuk memanggil effect tersebut. Tambhkan class ignielGlitch kedalamnya.
Contohnya :

<!-- Text Glitch (Grunge) Effect -->
<div class="ignielGlitch" data-text="Textrim">
Textrim</div>

- data-text="textrim" itu WAJIB Kalian tambahkan. Value atau isi harus sama persis dengan teks yang harus di tampilkan, kode di atas, isi elemen div adalah Textrim. Maka value data-text pun harus diisi Textrim.
- #000 adalah warna teks, Ketiganya bisa diatur dengan warna yang beda – beda supaya bayangan yang tampil bisa berwarna warni.

2. Ketika Disoroti

Text glitch / grunge effect on hover ini baru akan keluar ketika mouse sedang menyoroti tulisan. silahkan masuk ke HTML dan cari kode </style> untuk kode CSSnya adalah sebagai berikut :

/* Text Glitch (Grunge) Effect on Hover */
.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.

Dibawah ini adalah kode pemanggil Animasi Glitch ini.

<!-- Text Glitch (Grunge) Effect on Hover -->
<div class="ignielGlitch" data-text="Textrim">Textrim</div>

Mungkin hanya itu saja yang bisa saya share, apabila ada kendala atau ada kode yang error silahkan koment di kolom komentar dibawah ini, Terima kasih.

Demo