Cara Buat dan Pasang Efek Glitch dengan CSS di Blog

Imamkunblog | Pada kesempatan kali ini saya akan membahas kepada anda salah satu efek keren yang ada di Template Blogger Textrim buatan Mba Igniel. Fitur Glitch ini sangat menarik sekali dan fitur ini terdapat di bagian judul blog yang pada saat disoroti dengan dengan Mouse akan berguncang, shake atau bergerak dengan cepat.

Fitur ini sangatlah menarik perhatihan saya dan maka dari itu saya membuat artikel cara membuat efek glitch untuk dibagikan ke pada anda. Mungking, dari anda ada yang tidak menyukai efek ini, buat anda yang menykai efek ini anda bisa terus membaca artikel ini hingga habis.

Membuat Efek Glitch tidak memerlukan Kode JavaScript, hanya dengan menggunakan CSS saja sudah akan ringan untuk speed blog. Tidak hanya itu Efek Glitch ini sudah responsive dan support blog AMP.

Efek Glitch yang akan saya bagikan di artikel ini yaitu Efek Glitch Langsung (Default). Baiklah tidak perlu panjang lebar lagi, langsung saja kita mulai cara memasangnya berikut ini.

Cara Buat dan Pasang Efek Glitch dengan CSS di Blog

1. Log in ke Blogger.com
2. Cari kode </style>
3. Copy dan pastekan kode dibawah ini tepat diatas kode tersebut

/* 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;}}

Perlu diperhatikan, apabila anda ingin mengubah kecepatan pergerakan efeknya anda dapat mengubah angka 2.5s dengan sesuai keiingnan. Semakin besar angka yang digunakan maka semakin lambat efeknya.

Jika ingn mengubah warna font anda bisa ubah kode #000 dengan sesuai keinginan anda sendiri.

4. Kemudian Gunakan kode HTML untuk memanggil scrpt CSSnya, berikut ini adalah kode HTML yang digunakan.

<!-- Text Glitch (Grunge) Effect by igniel.com -->
<div class="ignielGlitch" data-text="Textrim">TEKS DISINI</div>

5. Untuk menambahkan Teks cukup ubah TEKS DISINI dengan teks sesuai keinginan anda. Untuk Textrim disamping itu biarkan saja atau diganti sama juga tidak apa-apa.

6. Selesai

Baca Juga: Cara Berlangganan Youtube Premium tanpa Iklan

Begitulah cara membuat Efek Glitch di Blog, semoga artikel ini bermanfaat. Apabila ada yang ingin ditanyakan komen saja dibawah ya!