Giao diện tối Nite

Header Ads

Hiệu Ứng Tuyết Rơi Cực Nhẹ Cho Blogspot

Chào Các Bạn Đến Với Khánh Blog Hôm Nay Mình Sẽ Share Cho Anh Em Hiệu Ứng Tuyết Rơi Giảm Lag Cho Blog Cực Chất.

Hình ảnh có liên quan 

Bước 1 : Vào Phần Chỉnh Sửa HTML

Bước 2 : Dán Đoạn Mã Này Bên Trên Thẻ </body>



<!-- Snow -->
<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>
//<![CDATA[
// The star of every good animation
var requestAnimationFrame = window.requestAnimationFrame || 
window.mozRequestAnimationFrame || 
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;

var transforms = ["transform", 
"msTransform", 
"webkitTransform", 
"mozTransform", 
"oTransform"];

var transformProperty = getSupportedPropertyName(transforms);

// Array to store our Snowflake objects
var snowflakes = [];

// Global variables to store our browser's window size
var browserWidth;
var browserHeight;

// Specify the number of snowflakes you want visible
var numberOfSnowflakes = 20;

// Flag to reset the position of the snowflakes
var resetPosition = false;

//
// It all starts here...
//
function setup() {
window.addEventListener("DOMContentLoaded", generateSnowflakes, false);
window.addEventListener("resize", setResetFlag, false);
}
setup();

//
// Vendor prefix management
//
function getSupportedPropertyName(properties) {
for (var i = 0; i < properties.length; i++) {
if (typeof document.body.style[properties[i]] != "undefined") {
return properties[i];
}
}
return null;
}

//
// Constructor for our Snowflake object
//
function Snowflake(element, radius, speed, xPos, yPos) {

// set initial snowflake properties
this.element = element;
this.radius = radius;
this.speed = speed;
this.xPos = xPos;
this.yPos = yPos;

// declare variables used for snowflake's motion
this.counter = 0;
this.sign = Math.random() < 0.5 ? 1 : -1;

// setting an initial opacity and size for our snowflake
this.element.style.opacity = .5 + Math.random();
this.element.style.fontSize = 6 + Math.random() * 20 + "px";
}

//
// The function responsible for actually moving our snowflake
//
Snowflake.prototype.update = function () {

// using some trigonometry to determine our x and y position
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;

// setting our snowflake's position
setTranslate3DTransform(this.element, Math.round(this.xPos), Math.round(this.yPos));

// if snowflake goes below the browser window, move it back to the top
if (this.yPos > browserHeight) {
this.yPos = -50;
}
}

//
// A performant way to set your snowflake's position
//
function setTranslate3DTransform(element, xPosition, yPosition) {
var val = "translate3d(" + xPosition + "px, " + yPosition + "px" + ", 0)";
element.style[transformProperty] = val;
}

//
// The function responsible for creating the snowflake
//
function generateSnowflakes() {

// get our snowflake element from the DOM and store it
var originalSnowflake = document.querySelector(".snowflake");

// access our snowflake element's parent container
var snowflakeContainer = originalSnowflake.parentNode;

// get our browser's size
browserWidth = document.documentElement.clientWidth;
browserHeight = document.documentElement.clientHeight;

// create each individual snowflake
for (var i = 0; i < numberOfSnowflakes; i++) {

// clone our original snowflake and add it to snowflakeContainer
var snowflakeCopy = originalSnowflake.cloneNode(true);
snowflakeContainer.appendChild(snowflakeCopy);

// set our snowflake's initial position and related properties
var initialXPos = getPosition(50, browserWidth);
var initialYPos = getPosition(50, browserHeight);
var speed = 5+Math.random()*40;
var radius = 4+Math.random()*10;

// create our Snowflake object
var snowflakeObject = new Snowflake(snowflakeCopy, 
radius, 
speed, 
initialXPos, 
initialYPos);
snowflakes.push(snowflakeObject);
}

// remove the original snowflake because we no longer need it visible
snowflakeContainer.removeChild(originalSnowflake);

// call the moveSnowflakes function every 30 milliseconds
moveSnowflakes();
}

//
// Responsible for moving each snowflake by calling its update function
//
function moveSnowflakes() {
for (var i = 0; i < snowflakes.length; i++) {
var snowflake = snowflakes[i];
snowflake.update();
}

// Reset the position of all the snowflakes to a new value
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);
}

//
// This function returns a number between (maximum - offset) and (maximum + offset)
//
function getPosition(offset, size) {
return Math.round(-1*offset + Math.random() * (size+2*offset));
}

//
// Trigger a reset of all the snowflakes' positions
//
function setResetFlag(e) {
resetPosition = true;
}
//]]>
</script>




Bước 3 : Cảm Nhận Từng Hạt Tuyết Đang Rơi Cứ Như Thật Vậy :D 

Facebook comments

Bình Luận (1):

  1. Nếu bạn có nhu cầu dịch thuật thì đây là những công ty dịch thuật uy tín mà bạn không thể không biết. Giải “Top 3 Thương hiệu dịch thuật uy tín nhất năm 2019” là một chương trình có ý nghĩa thiết thực, Công ty dịch thuật miền trung, một đơn vị chuyên cung cấp dịch vụ dịch thuật công chứng, dịch thuật chuyên ngành đã vinh dự được tôn vinh. Hệ thống thương hiệu và các Công ty dịch thuật con trực thuộc: dịch thuật kiên giang - dịch thuật miền trung tại 100 Trần Hưng Đạo, TP Rạch Giá là địa chỉ chuyên cung cấp dịch vụ dịch thuật chuyên nghiệp tại Kiên Giang và các khu vực lân cận ; dịch thuật tiếng campuchia (khơ me) tại sài gòn địa chỉ 47 Điện Biên Phủ, Phường Đakao, Quận 1 TP HCM, dịch thuật thanh hóa : địa số 449 Quang Trung, thanh hóa là nhà cung ứng dịch vụ dịch thuật uy tín hàng đầu tại thanh hóa; Công ty dịch thuật Viettrans và dịc vụ lang son translation: dịch vụ dịch thuật tại Lạng Sơn cho người nước ngoài có nhu cầu, giao diện tiếng Anh dễ sử dụng; dịch thuật tại bến tre: địa chỉ 100 Trần Cao Vân, TP bến tre nhà cung ứng dịch vụ dịch vụ dịch thuật phiên dịch hàng đầu tại bắc ninh; dịch thuật điện biên : Địa chỉ 123 Lê Trọng Tấn, TP Điện Biên chuyên cung cấp dịch vụ dịch thuật công chứng, dịch thuật đa ngôn ngữ, đa chuyên ngành tại Điện Biên; dịch thuật tại cao lãnh, đồng tháp 43 Điện Biên Phủ, TP Cao Lãnh chuyên cung cấp dịch vụ dịch thuật đa chuyên ngành tại Đồng Tháp; Công ty dịch thuật Hà Nội MIDtrans chuyên cung cấp dịch vụ dịch thuật tại hòa bình : địa chỉ 261 Bùi Văn Hòa, TP Hòa Bình là nhà cung ứng dịch vụ biên dịch, phiên dịch chuyên nghiệp tại địa bàn Hòa Bình. Ngoài ra, Chúng tôi cũng cung cấp các dịch vụ biên dịch và phiên dịch, dịch thuật công chứng chất lượng cao hơn 50 ngôn ngữ khác nhau như tiếng Anh, Nhật, Hàn, Trung, Pháp, Đức, Nga, .vv... Nhận dịch thuật công chứng đa chuyên ngành: Hợp đồng Kinh tế; Giấy xác nhận tài chính; Giấy chứng nhận độc thân; Dịch thuật Hồ sơ cá nhân; Dịch Hồ sơ đi du học; Dịch thuật Hồ sơ xuất khẩu lao động; Hộ khẩu; chứng minh nhân dân, thẻ căn cước công dângiấy kết hôn; hợp đồng kinh tế; đồng xuất nhập, báo cáo tài chính; Dịch thuật hồ sơ mời thầu; Dịch hồ sơ dự thầu; hồ sơ thầu; Dịch thuật công chứng giấy xác minh tình hình tài chính để đi nước ngoài; giấy ủy quyền; Giấy xác nhận hôn nhân, giấy xác nhận độc thân; Giấy chứng nhận quyền sở hữu nhà ở; giấy chứng nhận quyền sử dụng đất; giấy ủy quyền;. Các dự án đã triên khai đều nhận được phản hồi hài long của khách hàng.Đó là kết quả của một hệ thống quản lý chất lượng dịch thuật chuyên nghiệp, những tâm huyết và kinh nghiệm của đội ngũ biên dịch viên dịch thuật tiếng tây ban nha của chúng tôi. email: info@dichthuatmientrung.com.vn. Gọi ngay 0947.688.883 để có giá tốt

    Trả lờiXóa