Thêm Hiệu Ứng Tuyết Rơi Đón Giáng Sinh Cho Blog/Website Cực Hấp Dẫn

Xin chào bạn trước màn hình dễ thương, rất vui khi các bạn đến với chuyên mục Blogger Tips của Hồng Lâm Blog. Hôm nay mình xin share source tạo tuyết rơi cho blog cực kì xịn. 

Gần đến Giáng sinh rồi, mà blog/website vẫn bình thường như này thì chán biết mấy ha, cho nên các bạn hãy theo dõi bài viết dưới đây để trang trí cho blog/website của mình thật thu hút và sinh động với source code Tuyết rơi này nhé.

Them Hieu Ung Tuyet Roi Đon Giang Sinh Cho Blog/Website Cuc Hap Dan
Thêm Hiệu Ứng Tuyết Rơi Đón Giáng Sinh Cho Blog/Website Cực Cuốn Hút

Các Bước Thực Hiện

Lưu ý!
Trước khi thực hiện, vui lòng sao lưu chủ đề của các bạn để tránh gặp tình trạng lỗi và dễ dàng khôi phục, mình không chịu trách nhiệm.

Bước 1

  • Vào Blogger của các bạn => Chủ đề => Chỉnh sửa html.
  • Thực hiện tìm kiếm (Ctr + F) thẻ </head>
  • Sao chép tất cả Css được cung cấp bên dưới và dán chúng trên/trước thẻ </head>
<style type='text/css'>
/* Snow Falling Effect */
.techyball{position:fixed;top:0;left:0;right:0;pointer-events:none;z-index:20}
.snowstech{height:100%;position:relative;overflow:hidden;z-index:1}
</style>

Bước 2

  • Hãy tìm thẻ </body> trong Blog của bạn
  • Sao chép toàn bộ JavaScript bên dưới và dán nó ngay trên thẻ </body>
<div class='snowstech'>
<canvas class='techyball' id='techyball'></canvas>
</div>
<script type='text/javascript'>
//<![CDATA[
!function(){function t(t){var n=t.getContext("2d"),e=0,i=0,o=[],d=function(){this.x=this.y=this.dx=this.dy=0,this.reset()};function a(){e=window.innerWidth,i=window.innerHeight,t.width=e,t.height=i,function(t){if(t!=o.length){o=[];for(var n=0;n<t;n++)o.push(new d)}}(e*i/1e4)}d.prototype.reset=function(){this.y=Math.random()*i,this.x=Math.random()*e,this.dx=1*Math.random()-.5,this.dy=.5*Math.random()+.5},a(),function t(){n.clearRect(0,0,e,i),n.fillStyle="rgba(255,255,255,.3)",o.forEach(function(t){t.y+=t.dy,t.x+=t.dx,t.y>i&&(t.y=0),t.x>e&&(t.reset(),t.y=0),n.beginPath(),n.arc(t.x,t.y,5,0,2*Math.PI,!1),n.fill()}),window.requestAnimationFrame(t)}(),window.addEventListener("resize",a)}var n;n=function(){t(document.getElementById("techyball"))},"loading"!=document.readyState?n():document.addEventListener("DOMContentLoaded",n)}();
//]]>
</script>

Đừng quên lưu lại chủ đề nhé.

Mình có thêm Tuyết rơi ở bài viết này, nếu muốn nhìn rõ, hãy ấn vào biểu tượng Mặt trăng bên dưới (Chế độ tối).


Lời Kết

Sau khi xem Demo và Các bước mà mình hướng dẫn, mong các bạn thấy nó bổ ích thì hãy cho mình một bình luận hoặc chia sẻ nhé. Nếu có thắc mắc hay khiếu nại bản quyền thì bình luận bên dưới nhé. Giáng sinh vui vẻ.

Tham khảo: www.techaadi.eu.org