11 Nhận xét

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

Cập nhật: 10 thg 12, 2018 Lúc 23:48
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