Cara Membuat Efek Glitch Aktif Menggunakan CSS

HobbyTekno - Pada postingan kali ini admin akan menjelaskan cara membuat efek Glitch menggunakan CSS. Nah kita akan membuat 2 jenis efek glitch yaitu.

1. Live Active (Aktif langsung)
2. Saat Disorot (Hover)

Nah yang akan kita bahas pada postingan kali ini adalah efeknya langsung aktif pada text yang diinginkan.

Langsung saja simak caranya :

1. Tambahkan kode CSS Glitch untuk menciptakan animasi bergerak. Salin Kode CSS berikut diatas </b:skin> atau </style> dan simpan di pengaturan HTML.

/* Text Glitch Langsung */
.hobbyteknoGlitch {
  color: #000;
  position: relative;
  animation: hobbyteknoGlitch1 2.5s infinite;
  -moz-animation: hobbyteknoGlitch1 2.5s infinite;
  -webkit-animation: hobbyteknoGlitch1 2.5s infinite;
  -o-animation: hobbyteknoGlitch1 2.5s infinite;
}
.hobbyteknoGlitch:before,  .hobbyteknoGlitch:after {
  content: attr(data-text);
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}
.hobbyteknoGlitch:before {
  color: #000;
  animation: hobbyteknoGlitch2 2.5s infinite;
  -moz-animation: hobbyteknoGlitch2 2.5s infinite;
  -webkit-animation: hobbyteknoGlitch2 2.5s infinite;
  -o-animation: hobbyteknoGlitch2 2.5s infinite;
}
.hobbyteknoGlitch:after {
  color: #000;
  animation: hobbyteknoGlitch3 2.5s infinite;
  -moz-animation: hobbyteknoGlitch3 2.5s infinite;
  -webkit-animation: hobbyteknoGlitch3 2.5s infinite;
  -o-animation: hobbyteknoGlitch3 2.5s infinite;
}
@keyframes hobbyteknoGlitch1{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 hobbyteknoGlitch1{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 hobbyteknoGlitch2{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 hobbyteknoGlitch2{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 hobbyteknoGlitch3{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 hobbyteknoGlitch3{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;}}

Anda bisa menambahkan atau mengubah pengaturan seperti ukuran, jenis dan ketebalan pada font.

2. Selanjutnya, kita pasang elemen HTML baru untuk memanggil efek glitch tersebut. Pastikan untuk menambahkan class hobbyteknoGlitch ke dalamnya. Contohnya seperti berikut :

<div class="hobbyteknoGlitch" data-text="Glitch">Glitch</div>

Catatan : data-text="Glitch" Harus ditambahkan, isi nya harus sama dengan teks yang ingin anda tampilkan. pada kode di atas isi elemen div adalah Glitch. Maka value data-text pun harus diisi Glitch.

Hasilnya akan seperti berikut.

Glitch

Sekian Cara Membuat Efek Glitch Aktif Menggunakan CSS, semoga postingan Admin kali ini bermanfaat untuk anda. Jika ada kendala tanyakan saja pada komentar