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ƯỚ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'>•</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ả !!!
