Liên hệ quảng cáo
Liên hệ quảng cáo
profile card

Hiệu ứng tuyết rơi nhẹ nhàng trang trí Noel, mùa Đông cho Blogspot

Cập nhật: 28/07/2019 Bởi Duy... - A- A+

Xin chào các bạn quay lại với Duy Blogs. Bài này mình sẽ viết về cách tạo hiệu ứng tuyết rơi nhẹ nhàng cho Blogspot dùng CSS và JavaScript.
Demo bài này thì các bạn có thể xem trực tiếp tại Blog mình đang áp dụng nhé!

Hiệu ứng tuyết rơi nhẹ nhàng trang trí Noel, mùa Đông cho Blogspot
Vì thủ thuật này có dùng JavaScript lên có thể nó sẽ làm chậm tốc độ load trang của bạn. Nhưng nó cũng làm chậm tốc độ không không đáng kể lắm lên các bạn cứ áp dụng thủ thuật này làm để làm tăng vẻ đẹp cho Blog vào những ngày này...

Các bước thực hiện

Bước 1: Truy cập vào trang chỉnh sửa HTML của Blogspot.
Bước 2: Dán đoạn code này phía trên thẻ </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'>&#8226;</p>
</div>
<script>
var requestAnimationFrame = window.requestAnimationFrame || 
window.mozRequestAnimationFrame || 
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
var transforms = [&quot;transform&quot;, 
&quot;msTransform&quot;, 
&quot;webkitTransform&quot;, 
&quot;mozTransform&quot;, 
&quot;oTransform&quot;]; 
var transformProperty = getSupportedPropertyName(transforms);
var snowflakes = [];
var browserWidth;
var browserHeight;
var numberOfSnowflakes = 50;
var resetPosition = false;
function setup() {
window.addEventListener(&quot;DOMContentLoaded&quot;, generateSnowflakes, false);
window.addEventListener(&quot;resize&quot;, setResetFlag, false);}
setup();
function getSupportedPropertyName(properties) {
for (var i = 0; i &lt; properties.length; i++) {
if (typeof document.body.style[properties[i]] != &quot;undefined&quot;) {
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() &lt; 0.5 ? 1 : -1;
this.element.style.opacity = .5 + Math.random();
this.element.style.fontSize = 4 + Math.random() * 20 + &quot;px&quot;;}
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 &gt; browserHeight) {
this.yPos = -50;}}
function setTranslate3DTransform(element, xPosition, yPosition) {
var val = &quot;translate3d(&quot; + xPosition + &quot;px, &quot; + yPosition + &quot;px&quot; + &quot;, 0)&quot;;
element.style[transformProperty] = val;}
function generateSnowflakes() {
var originalSnowflake = document.querySelector(&quot;.snowflake&quot;);
var snowflakeContainer = originalSnowflake.parentNode;
browserWidth = document.documentElement.clientWidth;
browserHeight = document.documentElement.clientHeight;
for (var i = 0; i &lt; 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 &lt; snowflakes.length; i++) {
var snowflake = snowflakes[i];
snowflake.update(); }
if (resetPosition) {
browserWidth = document.documentElement.clientWidth;
browserHeight = document.documentElement.clientHeight; 
for (var i = 0; i &lt; 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>
Bước 3: Lưu mẫu lại.

Lời kết

Chỉ với một vài bước đơn giản thì các bạn đã có thể trang trí cho Blog mình thêm không khí của mùa đông và ngày noel gần đến rồi. Chúc các bạn thành công. Source: toishare.net

@ngylduy, @688.in, @ngylduy, @ngylduy

Ngày ấy ɐnh ngỏ lời thương và yêu đậm sâu với ǝm, ǝm có tin ɐnh và nắm tay anh, mình cùng đi qua từng mùa đông rét buốt.
Nếu ngày ấy ɐnh là chàng trai mà ǝm ngày đêm ước ao, ..., thì giờ đây ɐnh đã có câu chuyện thật đẹp...

Tết Trung Thu rước đèn đi chơi em rước đèn đi khắp phố phường, lòng vui sướng với đèn trong tay em múa ca trong ánh trăng rằm. Trung thu là Tết thiếu nhi, mà sao người lớn cứ đi chơi nhiều đi nhiều nó lại làm liều, làm liều nó lại ra nhiều thiếu nhi.
Niệm StyleLớp Thủ Thuật123 ShareNhái BlogBlog VNITNgọc Ánh BlogMinh ĐứcHuyDC BlogBảo Trọng BlogLong An IT
Chong chóng

Subscribe to our Newsletter