When creating a website, in addition to the function you also have to website decoration to make the interface richer. These days, the movement of clicking on the web will display a colorful heart shape in a very beautiful way. Today AnonyViet will guide you to create a heart click effect on Website using Javascript.
| Join the channel Telegram belong to AnonyViet 👉 Link 👈 |
Share Code to create a heart click effect on Website
To display a heart shape when clicking anywhere on the Website you need to use Javascript. The code below will help you do this quite simply. You can create flying hearts on Website any source code like Blogspot, WordPress…
Download Code Click Heart javascript
<script type="text/javascript"> ! function (e, t, a) { function n() { c( ".heart{width: 10px;height: 10px;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: -5px;}.heart:before{left: -5px;}" ), 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
The effect of clicking on the heart on Blogspot
For Blogspot, you access the Blogspot management page. Select Menu Theme -> Edit HTML.
Press Ctrl + F to display the search box. Typing
