Efek Heart click pada Blog- Penambahan animasi pada halaman blog mungkin sudah ramai digunakan beberapa tahun belakangan, namun pada saat sekarang ini justru penggunaan animasi tambahan ini cenderung kurang diminati.
Alasan kenapa penambahan efek animasi tidak lagi diminati oleh para blogger diantaranya adalah karena memasang animasi berlebihan bisa membebani loading/speed Blog, merusak struktur data blog dan bahkan penambahan animasi yang tidak sesuai justru akan membuat tampilan blog kita terkesan norak dan mengganggu kenyamanan pengunjung.
Apa itu efek heart click
Seperti namanya efek heart click atau memunculkan efek hati/love pada blog saat pengunjung melakukan click pada cursor. Cursor ini bisa mouse atau sentuhan jari pada smartphone.
Setiap satu klik/sentuhan menghasilkan warna efek yang berbeda. Untuk demonya bisa kalian coba klik di area mana saja pada Halaman ini dan lihat efek yang muncul.
Apakah penambahan efek heart click memberatkan loading blog?
Penambahan efek animasi heart click atau efek love warna - warni ini menggunakan full javascript tanpa tambahan library seperti jQuery. Jadi tidak akan membebani loading/speed blog Kalian. Disini saya juga memakai efek ini dan bisa Kalian rasakan pada kecepatan loading blog ini.
Apakah bentuk animasi bisa diubah?
Efek animasi yang dihasilkan dari penambahan javascript diatas tidak menggunakan gambar ataupun svg. Jika Kalian paham CSS maka Kalian bisa melakukan modifikasi pada bentuk efek yang dihasilkan dengan mengubah sedikit source code nya.
Cara menambahkan efek heart click pada blog
Bagi kalian yang ingin menambahkan efek heart klik pada blog Kalian. Maka bisa mengikuti tutorial yang akan saya bagikan berikut ini.
Penting!
Sebelum melanjutkan ke tahap edit script HTML
ada baiknya Kalian melakukan backup template terlebih dahulu
Pada dashboard Blogger pilih Tema/Theme
kemudian Backup
. Jika sudah silahkan ikuti langkah berikut.
Step 1 : Silahkan masuk ke Dashboard Blogger Kalian
Step 2 : Pilih menu Tema
kemudian Edit HTML
Step 3 : Sekarang tambahkan Kode Javascript berikut tepat di atas untuk </body>
. Atau jika tidak ada silahkan cari kode <!--</body>--></body>
atau </body>
<!--[Heart Click Animation]-->
<script>/*<![CDATA[*/
! function(e, t, a) {
function n() {
c(".heart{width: 12px;height: 12px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -8px;}.heart:before{left: -8px;}"), o(), r()
}
function r() {
for (var e = 0; e < d.length; e++) d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y--, d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999");
requestAnimationFrame(r)
}
function o() {
var t = "function" == typeof e.onclick && e.onclick;
e.onclick = function(e) {
t && t(), i(e)
}
}
function i(e) {
var a = t.createElement("div");
a.className = "heart", d.push({
el: a,
x: e.clientX - 5,
y: e.clientY - 5,
scale: 1,
alpha: 1,
color: s()
}), t.body.appendChild(a)
}
function c(e) {
var a = t.createElement("style");
a.type = "text/css";
try {
a.appendChild(t.createTextNode(e))
} catch (t) {
a.styleSheet.cssText = e
}
t.getElementsByTagName("head")[0].appendChild(a)
}
function s() {
return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
}
var d = [];
e.requestAnimationFrame = function() {
return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function(e) {
setTimeout(e, 1e3 / 60)
}
}(), n()
}(window, document);
/*]]>*/</script>
Step 4 :Simpan dan lihat hasilnya.
Itu saja? Iya memang hanya kode itu yang perlu ditambahkan
Untuk lebih mempermudah setiap penambahan script pada blog, jangan lupa tambahankan komentar sebagai penanda dibagian atas script jika suatu saat Kalian ingin merubah atau menghapusnya.
<!--[Heart Click Animation]-->
Penutup
Sekian cara menambakan efek animasi love/heart click pada blog semoga bermanfaat.