CSS Efek Animasi Glitch (Grunge) pada Teks Seperti Template Textrim

Cara membuat text dengan efek animasi CSS glitch / grunge seperti bayangan yang bergerak-gerak tanpa Javascript. Persis mirip theme Textrim dari Igniel.

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:

  1. Langsung default
  2. 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.

TEXTRIM

IGNIEL


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.

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.

8
CSS Efek Animasi Glitch (Grunge) pada Teks Seperti Template Textrim
CSS Efek Animasi Glitch (Grunge) pada Teks Seperti Template Textrim
Cara membuat text dengan efek animasi CSS glitch / grunge seperti bayangan yang bergerak-gerak tanpa Javascript. Persis mirip theme Textrim dari Igniel.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Artikel Terkait

8 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Adrawati Adraf
    20 Juli, 2020
    Profil: https://www.blogger.com/profile/15871623639882382746
    ini bisa buat header blog linkmags
    nggak mbak
  • Frederick Taufan
    20 Maret, 2020
    Profil: https://www.blogger.com/profile/03297157436320642362
    ini bisa buat header blog?
  • bang lana
    23 November, 2019
    Profil: https://www.blogger.com/profile/17360782749663679570
    Meletakan element html nya itu di mana kak?
  • googlengjobs
    07 Oktober, 2019
    Profil: https://www.blogger.com/profile/16629771135316588968
    Widgets doesn't show on your homepage template, how do I fix this
  • Yudha Wahyu Pratama
    05 Oktober, 2019
    Profil: https://www.blogger.com/profile/04069501359314647582
    Mbak igniel cara nambah di link postingan gimana mbak ?
  • Unknown
    27 September, 2019
    Profil: https://www.blogger.com/profile/18151358368234505068
    ganti font, ukuran dan warna font utamanya gmna kak?