Share Code Hiệu Ứng Thả TYM Khi Click Chuột

Hiệu Ứng Thả Tim Khi Click Chuột

Hí các bạn, chào mừng các bạn đã đến với bài viết tiếp theo của mình. Tiếp tục chuyên mục Blogger Tricks mình sẽ chia sẻ cho các bạn code thả tim khi bạn click chuột vào màn hình.

Share Code Hiệu Ứng Thả TYM Khi Click Chuột

Nếu bạn muốn biết thả tim như thế nào hãy click vào bất cứ đâu trên màn hình, một hình trái tim sẽ từ từ bay lên mờ dần rồi biết mất từ nơi bạn click.

Hướng Dẫn

• Bưới 1: Copy toàn bộ đoạn code dưới đây:

  
  <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>
    

• Bước 2: Dán toàn bộ đoạn code trên vào trước thẻ đóng </body>
• Bước 3: Lưu template lại rồi bật blog lên click xem thành quả!

Lời Kết

Vậy là trên đây mình đã chia sẻ cho các bạn cách thêm hiệu ứng thả tym khi click vào màn hình cho blogspot. Nếu cảm thấy hay hãy comment bên dưới cho mình biết. Chúc các bạn một ngày làm việc và học tập hiệu quả!

Copyright © Ngô Vi Minh Hiếu

Tham Khảo:
Code Pro

Đọc thêm: