Tạo hiệu ứng trái tim khi nhấp chuột bất kỳ vào blogspot

Hiệu ứng trái tim bay theo chuột là một đoạn mã JavaScript giúp tạo ra những trái tim nhỏ xuất hiện khi người dùng nhấp chuột trên trang web. Mỗi trái tim có màu ngẫu nhiên, tự động bay lên và biến mất, tạo cảm giác sinh động và thu hút hơn cho người xem.

Tạo hiệu ứng trái tim khi nhấp chuột bất kỳ vào blogspot.

Đây là một hiệu ứng rất được ưa chuộng trên Blogger / Blogspot, đặc biệt cho các blog cá nhân, blog chia sẻ cảm xúc, hoặc blog thời trang – ẩm thực.

Bài cũ úp lại kkk. Demo trên bài này luôn, cứ nhấp chuột là thấy thoy, ahihi 😍

Cài đặt hiệu ứng trái tim

Cách thực hiện cài đặt hiệu ứng trái tim khi nhấp chuột trên blogspot vào blog cũng khá đơn giản với việc bạn chỉ cần dán đoạn javsscript sau đây vào trước thẻ </body>  là xong tất cả mọi công việc rồi.

<script type='text/javascript'>
//<![CDATA[
!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(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>

Một số mẹo tùy chỉnh

👉 Thay đổi kích thước trái tim: Sửa giá trị width và height trong đoạn CSS (ví dụ 15px hoặc 20px).

👉 Giới hạn màu sắc: Nếu muốn trái tim chỉ hiển thị màu hồng, sửa dòng return "rgb(...)" thành return "#ff66cc".

👉 Tốc độ bay: Điều chỉnh phần d[e].y-- để thay đổi tốc độ trái tim bay lên (số càng lớn, tốc độ càng nhanh).

Quá đơn giản phải không nào. Demo thì các bạn nhấp nhấp nhấp chuột trái trực tiếp trên bài viết này sẽ thấy!

Kết luận

Hiệu ứng trái tim bay theo chuột là một chi tiết nhỏ nhưng mang lại cảm giác sinh động và dễ thương cho blog của bạn. Chỉ với vài dòng code JavaScript, bạn đã có thể tạo điểm nhấn khiến khách truy cập nhớ mãi.

Hãy thử chèn đoạn code trên vào Blogspot của bạn để cảm nhận ngay sự khác biệt nhé 💗

Xem thêm: Biến đổi con trỏ chuột bằng CSS đơn giản cho blogspot