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

Share

Tweet

Google+

Email

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é!

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

ĐIỀU KHOẢN SỬ DỤNG

1. Blog chúng tôi hoạt động hoàn toàn tự nguyện nhằm mang đến cho các bạn sự trải nghiệm tốt nhất.
2. Các tập tin được cung cấp link tải miễn phí.
3. Mọi người có thể chia link tải từ Blog chúng tôi qua các trang hoặc diễn đàn khác mà không phải xin phép tác giả hoặc ghi nguồn.
4. Chúng tôi không chịu trách nhiệm với lỗi phát sinh trong quá trình sử dụng tập tin.
5. Nếu các bạn gặp khăn có thể liên hệ trực tiếp với chúng tôi.

Bài đăng mới hơn Bài đăng cũ hơn