Hướng dẫn thêm hiệu ứng tuyết rơi ngẫu nhiên trang trí blogger mùa giáng sinh/noel

 

Share code hiệu ứng tuyết rơi trang trí mùa dịp noel

| Mở đầu 

Hello các bạn, lâu rồi không có ý tưởng mới, hôm nay mình mới tìm hiểu trên internet một thủ thuật nhỏ nhẹ trang trí cho blogger vào mùa giáng sinh, làm đẹp website hơn với hiệu ứng tuyết rơi ngẫu nhiên nhìn rất bắt mắt.

Các bạn đọc hướng dẫn bên dưới để biết cách thêm code nhé.

| Hướng dẫn thêm hiệu ứng 

Đầu tiên ta vào Blogger ➔ Chủ đề  Chỉnh sửa HTML ➔ Tìm tới thẻ đóng </body>

Copy toàn bộ đoạn code phía dưới nhé



<style>
	#snowflakeContainer{position:absolute;left:0px;top:0px;}
	.snowflake{padding-left:15px;font-size:14px;line-height:24px;position:fixed;color:#ebebeb;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()*30+"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>

| Lời kết

Cảm ơn các bạn đã xem bài viết này, hy vọng hiệu ứng này sẽ đem trải nghiệm tốt đến với bạn. Chúc các bạn một ngày tốt lành
Nguyễn Phi Khải

Xin chào, đây là lời nhắn tự động. Mình là Nguyễn Phi Khải, người có trách nhiệm quản lý website khaiphinguyen, bạn có thắc mắc gì hãy bình luận bên dưới để được hỗ trợ nhé.

2 Nhận xét

  1. đặt mình liên kết nhé mình đặt cho bạn rồi:

    link: https://www.honglamblog.xyz/
    tên: Hồng Lâm Blog
    mô tả: Chia sẻ thủ thuật

    thăn kiu <33

    Trả lờiXóa
Mới hơn Cũ hơn