Blog iTeam OS
Trang chủ
Blogspot Tips

Hướng dẫn thêm hiệu ứng tuyết rơi trong Blogger?

hiệu ứng tuyết rơi quá phổ biến trong thế giới blogger ngày nay nên rất ít người sử dụng. Có thể nhiều người nói rằng thiết lập hiệu ứng tuyết rơi

Xin chào mọi người, Trong bài viết này, tôi sẽ chia sẻ cách thêm hiệu ứng tuyết rơi trong Blogger. Hiệu ứng này sẽ làm đẹp giao diện blog của bạn và blog của bạn sẽ trông sống động với hiệu ứng tuyết rơi này.

Tuy nhiên, vì một số lý do mà hiệu ứng tuyết rơi quá phổ biến trong thế giới blogger ngày nay nên rất ít người sử dụng. Có thể nhiều người nói rằng thiết lập hiệu ứng tuyết rơi là bắt đầu hoặc một số người nói rằng nó chặn người xem của người đọc.

Hướng dẫn thêm hiệu ứng tuyết rơi trong Blogger
Hướng dẫn thêm hiệu ứng tuyết rơi trong Blogger?
Demo (xem trục tiếp tại bài viết)

Tuy nhiên, trong bài đăng này, tôi sẽ chia sẻ cách ảnh hưởng đến phiên bản Snowflake mới nhất trên blog. Trông đẹp mắt, không cản tầm nhìn của người đọc và không quá rườm rà cho quá trình tải blog. Nếu bạn muốn áp dụng nó vào blog, vui lòng làm theo các bước bên dưới.

Cách thêm hiệu ứng tuyết rơi trong Blogger: -

Style 1: -

Bước 1 :- Trước hết, Đăng nhập vào Trang tổng quan Blogger của bạn.

Bước 2 :- Trên Trang tổng quan Blogger, nhấp vào Chủ đề .

Bước 3 :- Nhấp vào biểu tượng mũi tên xuống bên cạnh nút 'Tùy Chỉnh' .

Bước 4 :- Nhấp vào Chỉnh sửa HTML , bạn sẽ được chuyển hướng đến trang chỉnh sửa.

Bước 5 :- Sau đó sao chép mã Css đã cho và đặt nó ở trên </head>.

<!-- hiệu ứng tuyết rơi Css -->
<style type='text/css'>
/* hiệu ứng tuyết rơi Css */
.stm-snow-fall-container{height:100%;position:relative;overflow:hidden;z-index:1}
.stm-snow-fall{position:fixed;top:0;left:0;right:0;pointer-events:none;z-index:20}
</style>

Bước 5 :- Sau đó sao chép mã Html & JavaScript đã cho và đặt nó lên trên </body>.

<!-- hiệu ứng tuyết rơi HTML -->
<div class='stm-snow-fall-container'>
<canvas class='stm-snow-fall' id='stm-snow-fall'></canvas>
</div>
<!-- hiệu ứng tuyết rơi JavaScript -->
<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("stm-snow-fall"))},"loading"!=document.readyState?n():document.addEventListener("DOMContentLoaded",n)}();
//]]>
</script>;

Bước 5 :- Cuối cùng, nhấp lưu chủ đề.

Style 2: -

Bước 1: Copy toàn bộ code dưới đây và tuỳ chỉ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>

Tuỳ chỉnh mặc định:

  • Thay đổi biểu tượng: <p class='snowflake'>❄</p>
    • ❊ ✽ ✫ ✬ ✭ ❃ ❋ ❀ ✤ ✥ ❄ ✾ ⋆ ✢ ✰ ☘ ❋ ✦ ✧ ✣ ✷ ✸ ✺ ✱ ✶ ✻ ❈ ❉ ✪ ✿ ❁ ✩ ★ ✢ ✣ ☘ ✤ ✥ ✱ ✲ ✵ ✶ ✷ ❊ ❋ ✸ ✹ ✺ ✻ ✽ ✾ ✿ ❀ ❁ ❂ ❃ ❈ ❉
  • Thay đổi màu tuyết: color:#ebebeb
  • Thay đổi số lượng: numberOfSnowflakes=50
  • Thay đổi kích thước: 30+"px"

Bước 2: Chèn toàn bộ code vào trước thẻ đóng </body>

Bước 3: Lưu lại và tận hưởng thành quả!

Kết luận :-

Trong bài đăng này, tôi đã chia sẻ hướng dẫn về Cách thêm hiệu ứng tuyết rơi trong Blogger . Tôi hy vọng hướng dẫn này có thể hữu ích cho tất cả các Blogger Chuyên nghiệp và Người mới bắt đầu. Cảm ơn bạn đã ghé thăm website của chúng tôi.

;

Truy cập Bypass Google Account APK để tải file APK nhé