Hiệu ứng tuyết rơi đơn giản bằng JavaScript

<script>
// Hình bông tuyết tùy ý (hình dáng)
var requestAnimationFrame = window.requestAnimationFrame || 
                            window.mozRequestAnimationFrame || 
                            window.webkitRequestAnimationFrame ||
                            window.msRequestAnimationFrame;
 
var transforms = ["transform", 
                  "msTransform", 
                  "webkitTransform", 
                  "mozTransform", 
                  "oTransform"];
 
var transformProperty = getSupportedPropertyName(transforms);
 
// Mảng lưu trữ Snowflake objects
var snowflakes = [];
 
// Khai báo biến lưu trữ kích thước cửa sổ
var browserWidth;
var browserHeight;
 
// Số bông tuyết rơi
var numberOfSnowflakes = 50;
 
// Thiết lập lại vị trí các bông tuyết
var resetPosition = false;
 
//
// Bắt đầu nào :)...
//
function setup() {
window.addEventListener("DOMContentLoaded", generateSnowflakes, false);
window.addEventListener("resize", setResetFlag, false);
}
setup();
 
//
// Properties
//
function getSupportedPropertyName(properties) {
    for (var i = 0; i < properties.length; i++) {
        if (typeof document.body.style[properties[i]] != "undefined") {
            return properties[i];
        }
    }
    return null;
}
 
//
// Cấu trúc Snowflake object
//
function Snowflake(element, radius, speed, xPos, yPos) {
 
// Thiết lập thuộc tính bông tuyết
    this.element = element;
    this.radius = radius;
    this.speed = speed;
    this.xPos = xPos;
    this.yPos = yPos;
 
// Khai báo biến bông tuyết chuyển động
    this.counter = 0;
    this.sign = Math.random() < 0.5 ? 1 : -1;
 
// Thiết lập giá trị opacity (độ trong suốt) và kích thước bông tuyết
    this.element.style.opacity = .1 + Math.random();
    this.element.style.fontSize = 12 + Math.random() * 50 + "px";
}
 
//
// function điều khiển chuyển động bông tuyết
//
Snowflake.prototype.update = function () {
 
// Sử dụng tính toán tìm vị trí x và y
    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;
 
// Thiết lập vị trí bông tuyết 
    setTranslate3DTransform(this.element, Math.round(this.xPos), Math.round(this.yPos));
 
    // Nếu bông tuyết rơi xuống ngoài cửa sổ, điều khiển bông tuyết quay lại từ bên trên
    if (this.yPos > browserHeight) {
    this.yPos = -50;
    }
}
 
//
// Cách khác để thiết lập vị trí bông tuyết
//
function setTranslate3DTransform(element, xPosition, yPosition) {
var val = "translate3d(" + xPosition + "px, " + yPosition + "px" + ", 0)";
    element.style[transformProperty] = val;
}
 
//
// function tạo tuyết
//
function generateSnowflakes() {
 
// Lấy đối tượng bông tuyết và lưu lại
    var originalSnowflake = document.querySelector(".snowflake");
 
    // Truy cập vào nhớ tạm
    var snowflakeContainer = originalSnowflake.parentNode;
 
    // Lấy kích thước cửa sổ
browserWidth = document.documentElement.clientWidth;
    browserHeight = document.documentElement.clientHeight;
 
    // Dùng hàm for để tạo ra từng bông tuyết
    for (var i = 0; i < numberOfSnowflakes; i++) {
 
    // Sao chép bông tuyết ra thành nhiều bản và lưu vào biến snowflakeContainer
        var snowflakeCopy = originalSnowflake.cloneNode(true);
        snowflakeContainer.appendChild(snowflakeCopy);
 
// Thiết lập thuộc tính vị trí ban đầu và vị trí xung quanh của bông tuyết
        var initialXPos = getPosition(50, browserWidth);
        var initialYPos = getPosition(50, browserHeight);
        var speed = 5+Math.random()*40;
        var radius = 4+Math.random()*10;
 
        // Tạo Snowflake object
        var snowflakeObject = new Snowflake(snowflakeCopy, 
        radius, 
        speed, 
        initialXPos, 
        initialYPos);
        snowflakes.push(snowflakeObject);
    }
 
    // Loại bỏ các bông tuyết từ từ (tạo hiệu ứng bông tuyết mờ dần)
snowflakeContainer.removeChild(originalSnowflake);
 
// gọi lại function moveSnowflakes sau 0.03 giây
    moveSnowflakes();
}
 
//
// function di chuyển các bông tuyết
//
function moveSnowflakes() {
    for (var i = 0; i < snowflakes.length; i++) {
        var snowflake = snowflakes[i];
        snowflake.update();
    }
 
// Đặt lại vị trí tất cả bông tuyết đến một giá trị mới
    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 return một số giữa (maximum - offset) và (maximum + offset)
// offset: lấy tọa độ element
//
function getPosition(offset, size) {
return Math.round(-1*offset + Math.random() * (size+2*offset));
}
 
//
// function thiết lập lại vị trí tất cả bông tuyết
//
function setResetFlag(e) {
resetPosition = true;
}</script>

<style>
#snowflakeContainer {
    position: absolute;
    left: 0px;
    top: 0px;
}
.snowflake {
    padding-left: 15px;
    font-family: Cambria, Georgia, serif;
    font-size: 14px;
    line-height: 24px;
    position: fixed;
    color: #FFFFFF;
    user-select: none;
    z-index: 1000;
}
.snowflake:hover {
    cursor: default;
}</style>

<div id="snowflakeContainer">
<p class="snowflake">*</p>
</div>