Selamat datang di website www.imamkunblog.com - Tempat Sharing Tips Trik Android, Komputer, Internet dll

Cara Buat dan Pasang Efek Glitch dengan CSS di Blog

Cara Buat dan Pasang Efek Glitch dengan CSS di Blog
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!
Show comments
Hide comments

0 Response to "Cara Buat dan Pasang Efek Glitch dengan CSS di Blog"

Post a Comment

Berkomentar dengan Baik dan Jangan Buat Spam
1. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Adblock Detected

Like this blog? Keep us running by whitelisting this blog in your ad blocker

This is how to whitelisting this blog in your ad blocker

Thank you

×