Hello sobat icloudZer kali ini admin bakalan memberikan informasi mengenai bagaimana caranya membuat efek animasi lingkaran saat mejyentuh tampilan di blogger
Info: Oke sobat icloudZer jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Animasi Lingkaran
Apa itu animasi lingkaran? animasi lingkaran di blogger merupakan suatu tampilan animasi bergerak yang muncul saat pengunjung blog menyentuh setiap bagian apapun dari sebuah blog, animasi yang muncul tersebut berupa sebuah lingkaran ataupun bisa di sebut sebagi animasi riple, oh iya selain efek sentuhan animasi lingkaran, admin juga telah membahas pada postingan sebelumnya terkait bagaimana caranya membuat efek sentuhan animasi love di blogger
Menggunakan CSS
Dalam proses pembuatan efek klik animasi lingkaran di blogger adalah dengan menggunakan kode CSS murni dan tanpa adanya penggunaan kode Javascript di dalamnya sehingga tidak membuat tampilan blog menjadi lambat
Muncul saat diklik
Seperti yang sudah admin bahas sebelumnya efek klik animasi di blogger tersebut, akan muncul saat pengunjung mengklik setiap tampilan di dalam blog, nah tampilan blog tersebut tiak terbatas alias bagian blog apapun jika di kliknataupun di sentuh akan menampilkan animasi lingkaran tersebut
Contoh Tampilan
Jika kamu penasaran dengan bagaimana kah comtoh tampilan dari efek klik animasi CSS lingkaran di blogger, kamu bisa mncoba mengklik bagian apapun di dalam blog icloudice ini
Info: Bagaimana sobat debgan contoh tampilan nya keren yak, pastilah keren
Cara pembuatan
- Login keakaun blogger kamu, kemudian pergi kemenu edit HTML
- Selanjutnya salin kode CSS di bawah ini letakkan diatas ataupun sebelum kode <head>
- Langsung aja tanpa basa basi lagi salin kode javascript pembuat efek klik ataupun efek sentuhan menggunakan animasi lingkaran di blogger di bawah ini kemudian letakkan tepat di atas ataupun sebelum kode </body>
<style type="text/css">
.rahlingkar{border:4px solid #f80000;position:fixed;left:53%;transform:scale(0.5);display:none;width:69px;height:69px;border-radius:99em;z-index:999}.rahlingkar.active{display:block;animation:rahlingkar 0.4s ease-out forwards}
@keyframes rahlingkar{from{transform:scale(0.2);opacity:1}to{transform:scale(1);opacity:0}}
</style>Info: Tidak harus tepat di atas kode </head> juga gak papa kok, asalkan jangan menaruh kode tersebut dibaqah ataupun sesudah kode </head>
<script>//<![CDATA[
var _0x5a80=["\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x72\x61\x68\x6C\x69\x6E\x67\x6B\x61\x72\x22\x3E\x3C\x2F\x73\x70\x61\x6E\x3E","\x61\x70\x70\x65\x6E\x64","\x62\x6F\x64\x79","\x63\x6C\x69\x63\x6B","\x63\x6C\x69\x65\x6E\x74\x58","\x63\x6C\x69\x65\x6E\x74\x59","\x61\x63\x74\x69\x76\x65","\x61\x64\x64\x43\x6C\x61\x73\x73","\x63\x73\x73","\x2E\x72\x61\x68\x6C\x69\x6E\x67\x6B\x61\x72","\x6F\x6E","\x61\x6E\x69\x6D\x61\x74\x69\x6F\x6E\x65\x6E\x64\x20\x77\x65\x62\x6B\x69\x74\x41\x6E\x69\x6D\x61\x74\x69\x6F\x6E\x45\x6E\x64\x20\x6F\x41\x6E\x69\x6D\x61\x74\x69\x6F\x6E\x45\x6E\x64\x20\x6F\x61\x6E\x69\x6D\x61\x74\x69\x6F\x6E\x65\x6E\x64\x20\x4D\x53\x41\x6E\x69\x6D\x61\x74\x69\x6F\x6E\x45\x6E\x64","\x72\x65\x6D\x6F\x76\x65\x43\x6C\x61\x73\x73"];$(_0x5a80[2])[_0x5a80[1]]($(_0x5a80[0])),$(document)[_0x5a80[10]](_0x5a80[3],function(_0x568ax1){var _0x568ax2=_0x568ax1[_0x5a80[4]],_0x568ax3=_0x568ax1[_0x5a80[5]];$(_0x5a80[9])[_0x5a80[8]]({top:_0x568ax3- 30,left:_0x568ax2- 30})[_0x5a80[7]](_0x5a80[6])}),$(_0x5a80[9])[_0x5a80[10]](_0x5a80[11],function(){$(_0x5a80[9])[_0x5a80[12]](_0x5a80[6])})
//]]>
</script><script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>Info: Jika sudah langsung saja simpan template sobat , kemudian lihat bagaimana hasilnya, semiga bermanfaat