Cách Làm Cảnh Tuyết Rơi Cho Blogger
Mùa đông đã tới mang cho chúng ta cái lạnh giá vô cùng nhưng nó lại báo hiệu cho chúng ta biết là đã sắp hết một năm rồi nhưng điều đó không quan trọng trong bài viết này.
Vì ở bài viết này mình xin giới thiệu và chia sẽ cho các bạn code hiệu ứng tuyết rơi cho blogger của các bạn dùng để trang trí cho Blog của mình.
Hướng dẫn sử dụng
Bước 1: Các bạn bấm nào nút xem code ở trên mà sao chép toàn bộ đoạn code đó
Bước 2: Các bạn vào blogger của mình vào phần Chủ đề > Chỉnh sửa HTML
Bước 3: Các bạn bấm Ctrl + F tìm thẻ </body> và dán đoạn code mình đã sao chép vào bên trên </body>.
<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>
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(properties) {
for (var i = 0; i < properties.length; i++) {
if (typeof document.body.style[properties[i]] != "undefined") {
return properties[i]; } } return null;}
function Snowflake(element, radius, speed, xPos, yPos) {
this.element = element;
this.radius = radius;
this.speed = speed;
this.xPos = xPos;
this.yPos = yPos;
this.counter = 0;
this.sign = Math.random() < 0.5 ? 1 : -1;
this.element.style.opacity = .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(element, xPosition, yPosition) {
var val = "translate3d(" + xPosition + "px, " + yPosition + "px" + ", 0)";
element.style[transformProperty] = val;}
function generateSnowflakes() {
var originalSnowflake = document.querySelector(".snowflake");
var snowflakeContainer = originalSnowflake.parentNode;
browserWidth = document.documentElement.clientWidth;
browserHeight = document.documentElement.clientHeight;
for (var i = 0; i < numberOfSnowflakes; i++) {
var snowflakeCopy = originalSnowflake.cloneNode(true);
snowflakeContainer.appendChild(snowflakeCopy);
var initialXPos = getPosition(50, browserWidth);
var initialYPos = getPosition(50, browserHeight);
var speed = 5+Math.random()*40;
var radius = 4+Math.random()*10;
var snowflakeObject = new Snowflake(snowflakeCopy, radius, speed, initialXPos, initialYPos);
snowflakes.push(snowflakeObject); }
snowflakeContainer.removeChild(originalSnowflake);
moveSnowflakes();}
function moveSnowflakes() {
for (var i = 0; i < snowflakes.length; i++) {
var snowflake = snowflakes[i];
snowflake.update(); }
if (resetPosition) {
browserWidth = document.documentElement.clientWidth;
browserHeight = document.documentElement.clientHeight;
for (var i = 0; i < snowflakes.length; i++) {
var snowflake = snowflakes[i];
snowflake.xPos = getPosition(50, browserWidth);
snowflake.yPos = getPosition(50, browserHeight); }
resetPosition = false; }
requestAnimationFrame(moveSnowflakes);}
function getPosition(offset, size) {
return Math.round(-1*offset + Math.random() * (size+2*offset));}
function setResetFlag(e) {
resetPosition = true;}
</script>
Thế là xong. Chúc Các Bạn Thành Công !
Post a Comment