Heart Click Effect script for your website
Heart Click Effect: Adding Love to Your Website
In today's digital age, websites are constantly seeking innovative ways to engage their users and create memorable experiences. One popular technique is the implementation of interactive effects that respond to user actions. One such effect is the heart click effect, where a heart appears and animates when a user clicks on the screen. This simple yet delightful feature can add a touch of love and playfulness to your website.
Once you've added this code to your website, you'll enable the heart click effect. Here are some benefits of incorporating this effect into your website:
Benifits of using heart click effect on website
1. Emotional connection: The heart click effect evokes positive emotions and creates a sense of warmth and love. It can enhance the emotional connection between your website and its users.
2. Engagement: Interactive elements like the heart click effect encourage user engagement. When users see the hearts animate in response to their clicks, it triggers a playful response and keeps them engaged with your website.
3. Visual appeal: The animated hearts add visual appeal and an element of surprise to your website. It creates a visually pleasing experience for users, making your website more memorable and enjoyable to explore.
4. Shareability: If your website involves user-generated content or social sharing, the heart click effect can encourage users to share their experiences with others. Users are more likely to share a website that offers unique and delightful features.
5. Personalization: The heart click effect can be customized to match your website's design and branding. You can adjust the size, color, and animation parameters to create a personalized experience that aligns with your website's style.
How to add heart touching effect on website 😉
- Go to blogger dashboard
- Go to layout
- Click to add a gadget on Sidebar or footer
- Add a HTML javascript gadget and paste this code
- Iff not you can paste this code above your close body tag
Code for heart 💓 touching effect 🗿
<!-- tap to blow heart 💓 -->
<script>
(function(window, document) {
function init() {
addStyles('.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;' +
'}');
addClickListener();
animate();
}
function animate() {
for (var i = 0; i < hearts.length; i++) {
if (hearts[i].alpha <= 0) {
document.body.removeChild(hearts[i].el);
hearts.splice(i, 1);
} else {
hearts[i].y--;
hearts[i].scale += 0.004;
hearts[i].alpha -= 0.013;
hearts[i].el.style.cssText =
'left: ' + hearts[i].x + 'px;' +
'top: ' + hearts[i].y + 'px;' +
'opacity: ' + hearts[i].alpha + ';' +
'transform: scale(' + hearts[i].scale + ',' + hearts[i].scale + ') rotate(45deg);' +
'background: ' + hearts[i].color + ';' +
'z-index: 99999';
}
}
requestAnimationFrame(animate);
}
function addClickListener() {
var oldOnClick = window.onclick;
window.onclick = function(event) {
oldOnClick && oldOnClick();
createHeart(event);
}
}
function createHeart(event) {
var heart = document.createElement('div');
heart.className = 'heart';
hearts.push({
el: heart,
x: event.clientX - 5,
y: event.clientY - 5,
scale: 1,
alpha: 1,
color: getRandomColor()
});
document.body.appendChild(heart);
}
function addStyles(styles) {
var style = document.createElement('style');
style.type = 'text/css';
try {
style.appendChild(document.createTextNode(styles));
} catch (exception) {
style.styleSheet.
cssText = styles;
}
document.getElementsByTagName('head')[0].appendChild(style);
}
function getRandomColor() {
return 'rgb(' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ')';
}
var hearts = [];
window.requestAnimationFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
setTimeout(callback, 1000 / 60);
};
})();
init();
})(window, document);</script>
Remember, while the heart click effect can enhance user experience, it's essential to use it judiciously and ensure it doesn't interfere with the functionality or accessibility of your website. By implementing this effect thoughtfully, you can create a delightful and engaging experience for your users.
