SHARE CODE HIỆU ỨNG TUYẾT RƠI CHO BLOG, WEBSITE ĐÓN GIÁNG SINH

Đã Xuất Bản

TẢN MẠN

Hello, Chào mừng tất cả các bạn đã đến với bài viết tiếp theo của mình ! Do bận đi học, đi làm nên lâu lâu mới có thời gian viết bài cho các bạn được :) Sáng nay được nghỉ để chiều đi thi mà chẳng biết ôn gì nên lên đây viết bài chia sẻ, tâm sự xíu cho đỡ buồn. Không linh tinh luyên thuyên nữa thì chúng ta bắt đầu nào =))
Như tiêu đề đã nói, hôm nay mình sẽ chia sẻ cho các bạn một đoạn code hiệu ứng tuyết rơi tuyệt đẹp !!! Sắp Noel rồi đó, các bạn tranh thủ lấy về trang trí cho blog nó nhộn nhịp đi nào :) Và mình cũng nói luôn, code này không phải do mình viết hay chia sẻ lại từ blog nào :) mà mình vọc (mạn phép lấy trộm) được bên Ảnh Bìa Chất . Nếu bạn nào có ý kiến về bản quyền hãy nhanh trí để lại một comment =)) Mình sẽ xóa ngay nếu hợp lý :)
Hình ảnh chỉ mang tính chất mình họa (các bạn có thể xem live ngay tại bài viết này)

HƯỚNG DẪN THỰC HÀNH

BƯỚC 1:

Các bạn nhanh trí Copy đoạn code bên dưới nha =))
<style>
#snowflakeContainer{position:absolute;left:0px;top:0px;}
.snowflake{padding-left:15px;font-size:14px;line-height:24px;position:fixed;color: #FFFFFF;user-select:none;z-index:1000;-moz-user-select:none;-ms-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
.snowflake:hover {cursor:default}
</style>
<div id='snowflakeContainer'>
<p class='snowflake'>&#8226;</p>
</div>
<script style='text/javascript'>//<![CDATA[
var requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;var transforms=["transform","msTransform","webkitTransform","mozTransform","oTransform"];var transformProperty=getSupportedPropertyName(transforms);var snowflakes=[];var browserWidth;var browserHeight;var numberOfSnowflakes=50;var resetPosition=false;function setup(){window.addEventListener("DOMContentLoaded",generateSnowflakes,false);window.addEventListener("resize",setResetFlag,false)}setup();function getSupportedPropertyName(b){for(var a=0;a<b.length;a++){if(typeof document.body.style[b[a]]!="undefined"){return b[a]}}return null}function Snowflake(b,a,d,e,c){this.element=b;this.radius=a;this.speed=d;this.xPos=e;this.yPos=c;this.counter=0;this.sign=Math.random()<0.5?1:-1;this.element.style.opacity=0.5+Math.random();this.element.style.fontSize=4+Math.random()*20+"px"}Snowflake.prototype.update=function(){this.counter+=this.speed/5000;this.xPos+=this.sign*this.speed*Math.cos(this.counter)/40;this.yPos+=Math.sin(this.counter)/40+this.speed/30;setTranslate3DTransform(this.element,Math.round(this.xPos),Math.round(this.yPos));if(this.yPos>browserHeight){this.yPos=-50}};function setTranslate3DTransform(a,c,b){var d="translate3d("+c+"px, "+b+"px, 0)";a.style[transformProperty]=d}function generateSnowflakes(){var b=document.querySelector(".snowflake");var h=b.parentNode;browserWidth=document.documentElement.clientWidth;browserHeight=document.documentElement.clientHeight;for(var d=0;d<numberOfSnowflakes;d++){var j=b.cloneNode(true);h.appendChild(j);var e=getPosition(50,browserWidth);var a=getPosition(50,browserHeight);var c=5+Math.random()*40;var g=4+Math.random()*10;var f=new Snowflake(j,g,c,e,a);snowflakes.push(f)}h.removeChild(b);moveSnowflakes()}function moveSnowflakes(){for(var b=0;b<snowflakes.length;b++){var a=snowflakes[b];a.update()}if(resetPosition){browserWidth=document.documentElement.clientWidth;browserHeight=document.documentElement.clientHeight;for(var b=0;b<snowflakes.length;b++){var a=snowflakes[b];a.xPos=getPosition(50,browserWidth);a.yPos=getPosition(50,browserHeight)}resetPosition=false}requestAnimationFrame(moveSnowflakes)}function getPosition(b,a){return Math.round(-1*b+Math.random()*(a+2*b))}function setResetFlag(a){resetPosition=true};
//]]></script>

BƯỚC 2:

Tiếp tục nhanh trí Paste đoạn code trên vào ngay trước thẻ đóng </boby> của blog =))

BƯỚC 3:

Lưu chủ để và tận hưởng thành quả !!!

LỜI KẾT

Nếu thấy bài viết hay thì đừng quên nhấn share và click quảng cáo để ủng hộ mình nha !!!
Chúc các bạn một ngày học tập và làm việc thật hiệu quả !!!
Mọi hình ảnh/bài viết trên trang web này điều được tự mình design hoặc sưu tầm từ các trang khác ! Mọi hành động Copy & Reup vui lòng ghi rõ nguồn Lê Anh Đức

Bài Viết Bạn Nên Xem


35 bình luận

Hãy cùng tham gia bình luận về bài viết này nhé!

  1. chết chết ảnh ai kia mà xinh zữ vậy anh ơi :*

    Trả lờiXóa
  2. thú vị nha :p haha chúc a buổi tối vv <3

    Trả lờiXóa
  3. Trả lời
    1. ui đen thế....em gửi lại đi...nghe nói nếu gửi lại 2-3 lần mà vẫn ko được là nó sẽ cho mình xác minh bằng giấy tờ up lên đó...thế nên là cứ yên tâm :D google nó ko lừa đảo đâu :D

      Xóa
  4. Trả lời
    1. @Hoàng Thành sao nãy em load lại bị mất bài này thế :v

      Xóa
    2. có chút vấn đề bản quyền :)...giải quyết xong rồi :D

      Xóa
    3. không xinh bằng Trinh nè <3

      Xóa
    4. thì ah có bảo xinh đâu :( Trinh thì xinh rồi :(

      Xóa
    5. Nào đã có ai yêu :D Còn đang sợ ế đây này <3

      Xóa
    6. Vậy ny Đức rồi (y) không Đức thì Thắng :D Biết thừa :3

      Xóa
    7. Ảnh mạng bố ạ :( lom dom

      Xóa
    8. @Lâm Nông Quý biết ai ở đây không ? Nói cư như thật ý :)

      Xóa
    9. úi trời ảnh mạng thì bản quyền là đúng rồi :D

      Xóa
    10. bản quyền nội dung ông ạ :) ảnh thì ko sao :v

      Xóa
    11. hôm nào up ảnh bé Trinh đi Thành ơi :D

      Xóa
    12. đừng có mà mơ :) :) :)

      Xóa
    13. Noel sẽ có event nhé :D lúc ý kiểu gì chẳng có yên tâm :*

      Xóa
    14. Thử xem :) đừng có mà nch :)

      Xóa
    15. căng đét :D :D :D :D :D :D

      Xóa
    16. thôi đi tắm (y) xàm với ông có mà hết buổi =))

      Xóa
    17. dạo này lười viết bài quá nha =)) toàn bài cũ ko à :(

      Xóa
    18. hay để tôi add ông làm ctv rồi cho ông viết bài :)) viết bài phải có hứng chứ :( cạn lời để viết luôn rồi <3

      Xóa
    19. ngủ thôi mấy cậu ơi <3 Hà Nội lạnh lắm rồi :((

      Xóa
  5. thấy temp load chậm quá ông êi

    Trả lờiXóa
Có Thể Bạn Đang Tìm