Home
HTML CSS
Thủ Thuật Blogger

Chia Sẻ Code Hiệu Ứng Tuyết Rơi HTML5 Canvas Siêu Mượt

Anonymous
Code hiệu ứng tuyết rơi HTML5 Canvas

Không khí Giáng Sinh đang tràn ngập khắp các con phố, và đây cũng là thời điểm “vàng” để các chủ website, lập trình viên khoác lên mình giao diện mới cho trang web của mình. Một trong những cách đơn giản nhưng hiệu quả nhất để mang không khí lễ hội về “nhà” chính là sử dụng code hiệu ứng tuyết rơi. Tuy nhiên, nỗi ám ảnh lớn nhất của anh em làm web khi chèn hiệu ứng này chính là vấn đề hiệu năng: Web bị giật, lag, quạt tản nhiệt máy tính kêu to, hoặc điện thoại bị nóng ran khi truy cập.

Hiểu được nỗi đau đó, hôm nay TruongDevs xin chia sẻ đến các bạn một giải pháp hoàn toàn mới: Đoạn code tạo hiệu ứng tuyết rơi sử dụng công nghệ HTML5 Canvas. Đây không phải là những đoạn script jQuery cũ kỹ của 10 năm trước, mà là một phiên bản “Crystal Clear” được tối ưu hóa từng dòng lệnh, đảm bảo giữ nguyên tốc độ tải trang mà vẫn mang lại vẻ đẹp sang trọng, tinh tế.

🟢 Live Demo

Tại sao nên dùng code hiệu ứng tuyết rơi HTML5?

Trước khi đi vào phần hướng dẫn, chúng ta cần hiểu tại sao các đoạn code trôi nổi trên mạng thường khiến website trở nên nặng nề. Hầu hết các thư viện cũ (như JQuery Snowfall) sử dụng kỹ thuật thao tác trực tiếp lên DOM (Document Object Model).

Hãy tưởng tượng, nếu bạn muốn có 100 bông tuyết, trình duyệt sẽ phải tạo ra 100 thẻ div hoặc span. Khi bông tuyết di chuyển, trình duyệt phải tính toán lại vị trí và vẽ lại (repaint) giao diện cho 100 thẻ này liên tục vài chục lần mỗi giây. Điều này ngốn rất nhiều tài nguyên CPU và RAM, đặc biệt là trên các thiết bị di động yếu.

Giải pháp “Luxury Snow” từ TruongDevs

Để giải quyết triệt để vấn đề trên, đoạn code hiệu ứng tuyết rơi mình chia sẻ dưới đây sử dụng thẻ <canvas>. Thay vì tạo ra hàng trăm thẻ HTML, chúng ta chỉ dùng duy nhất 1 thẻ Canvas bao phủ màn hình. Mọi bông tuyết sẽ được “vẽ” lên đó bằng GPU (Card đồ họa) thông qua Javascript.

Ưu điểm vượt trội của phiên bản này:

  • Hiệu năng 60FPS: Sử dụng hàm requestAnimationFrame giúp chuyển động mượt mà đồng bộ với tần số quét màn hình, không gây giật cục.
  • Đồ họa Vector sắc nét: Bông tuyết được vẽ bằng thuật toán toán học, đảm bảo sắc nét tuyệt đối trên cả màn hình Retina 4K hay màn hình điện thoại đời mới.
  • Hiệu ứng chiều sâu (Depth of Field): Mình đã thêm thuật toán 3D giả lập. Bạn sẽ thấy có những bông tuyết to rõ (ở gần) và những đốm tuyết mờ ảo (ở xa), tạo cảm giác không gian rất “điện ảnh” và sang trọng.
  • Không xung đột: Code hoạt động độc lập, không phụ thuộc vào jQuery hay bất kỳ thư viện bên thứ 3 nào khác.

Chia sẻ Source Code hiệu ứng tuyết rơi HTML

Dưới đây là toàn bộ đoạn code hiệu ứng tuyết rơi. Bạn không cần phải tải file ảnh hay file JS nào cả, tất cả đã được gói gọn trong một khối duy nhất để tiện cho việc Copy & Paste.

Lưu ý: Đoạn code này đã được tùy chỉnh theo phong cách sang trọng, minimalist, phù hợp cho cả web bán hàng, blog cá nhân hay landing page doanh nghiệp 

<canvas id="truongdevs-crystal-canvas"></canvas>

<style>
    #truongdevs-crystal-canvas {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 999999;
    }
</style>

<script>
    (function() {
        const canvas = document.getElementById('truongdevs-crystal-canvas');
        const ctx = canvas.getContext('2d');

        let width, height;
        let flakes = [];

        const config = {
            count: 60,
            speed: 0.8,
            wind: 0.5,
            color: "255, 255, 255",
            minSize: 5,
            maxSize: 20
        };

        function resize() {
            width = canvas.width = window.innerWidth;
            height = canvas.height = window.innerHeight;
        }
        window.addEventListener('resize', resize);
        resize();

        class CrystalFlake {
            constructor() {
                this.init(true);
            }

            init(isFirstTime = false) {
                this.x = Math.random() * width;
                this.y = isFirstTime ? Math.random() * height : -50;

                this.size = Math.random() * (config.maxSize - config.minSize) + config.minSize;
                this.z = Math.random() * 2 + 1;

                this.speedY = (Math.random() * 0.5 + 0.5) * config.speed * this.z;
                this.speedX = (Math.random() - 0.5) * config.wind * this.z;

                this.angle = Math.random() * Math.PI * 2;
                this.spin = (Math.random() - 0.5) * 0.02;
                this.opacity = (Math.random() * 0.4 + 0.3) * (this.z / 3);
            }

            update() {
                this.y += this.speedY;
                this.x += this.speedX + Math.sin(this.angle) * 0.3;
                this.angle += this.spin;

                if (this.x > width + 50) this.x = -50;
                if (this.x < -50) this.x = width + 50;

                if (this.y > height + 50) this.init();
            }

            draw() {
                ctx.save();
                ctx.translate(this.x, this.y);
                ctx.rotate(this.angle);

                ctx.beginPath();
                ctx.strokeStyle = `rgba(${config.color}, ${this.opacity})`;
                ctx.lineWidth = this.size < 10 ? 1 : 1.5;
                ctx.lineCap = 'round';

                if (this.z < 1.5) {
                    ctx.fillStyle = `rgba(${config.color}, ${this.opacity * 0.5})`;
                    ctx.arc(0, 0, this.size / 2, 0, Math.PI * 2);
                    ctx.fill();
                } else {
                    for (let i = 0; i < 6; i++) {
                        ctx.rotate(Math.PI / 3);
                        ctx.moveTo(0, 0);
                        ctx.lineTo(0, this.size);
                        ctx.moveTo(0, this.size * 0.5);
                        ctx.lineTo(this.size * 0.3, this.size * 0.7);
                        ctx.moveTo(0, this.size * 0.5);
                        ctx.lineTo(-this.size * 0.3, this.size * 0.7);
                    }
                    ctx.stroke();
                    ctx.beginPath();
                    ctx.fillStyle = `rgba(255, 255, 255, ${this.opacity + 0.2})`;
                    ctx.arc(0, 0, 1, 0, Math.PI * 2);
                    ctx.fill();
                }
                ctx.restore();
            }
        }

        function init() {
            flakes = [];
            for (let i = 0; i < config.count; i++) {
                flakes.push(new CrystalFlake());
            }
            loop();
        }

        function loop() {
            ctx.clearRect(0, 0, width, height);
            for (let i = 0; i < flakes.length; i++) {
                flakes[i].update();
                flakes[i].draw();
            }
            requestAnimationFrame(loop);
        }
        init();
    })();
</script>

Hướng dẫn cài đặt code lên website chi tiết

Để code hiệu ứng tuyết rơi hoạt động, bạn chỉ cần dán đoạn code trên vào vị trí thích hợp trên website. Dưới đây là hướng dẫn cho các nền tảng phổ biến nhất:

Đối với WordPress

Có 2 cách an toàn để chèn code hiệu ứng tuyết rơi mà không sợ lỗi giao diện khi update theme:

  • Cách 1 (Khuyên dùng): Cài plugin Insert Headers and Footers (hoặc WPCode). Sau khi cài, bạn vào menu Code Snippets -> Header & Footer, dán toàn bộ đoạn code trên vào ô Footer. Lưu lại là xong.
  • Cách 2 (Sửa file theme): Truy cập vào Appearance (Giao diện) -> Theme File Editor. Tìm file footer.php ở cột bên phải. Dán đoạn code vào ngay bên trên thẻ đóng </body>.

Đối với Blogspot (Blogger)

Bạn vào trang quản trị Blogger, chọn mục Chủ đề (Theme) -> Chỉnh sửa HTML. Nhấn Ctrl + F và tìm thẻ </body>. Dán code ngay bên trên thẻ này và lưu lại.

Đối với Haravan / Shopify / Sapo

Các nền tảng thương mại điện tử này cũng cho phép sửa code giao diện. Bạn tìm đến file theme.liquid (đối với Shopify/Haravan) và làm tương tự như trên: dán trước thẻ đóng </body>.

Tùy biến hiệu ứng theo phong cách riêng

Một trong những điểm mạnh của đoạn code hiệu ứng tuyết rơi do TruongDevs viết là khả năng tùy biến cực cao. Bạn có thể thay đổi các thông số trong biến config ở đầu đoạn script để phù hợp với màu sắc thương hiệu:

  • Thay đổi số lượng tuyết: Tìm dòng count: 60. Nếu bạn muốn tuyết rơi dày đặc như bão tuyết, hãy tăng lên 150. Tuy nhiên, để giữ vẻ sang trọng và không che mất nội dung web, mình khuyên nên để từ 40 đến 60.
  • Thay đổi màu sắc: Dòng color: “255, 255, 255” đang quy định màu trắng. Nếu website của bạn có nền trắng (white background), tuyết trắng sẽ không hiện rõ. Lúc này, hãy thử đổi sang màu Vàng Gold (218, 165, 32) hoặc Đỏ Giáng Sinh (220, 20, 60) để tạo điểm nhấn độc đáo.

Điều chỉnh tốc độ: Dòng speed: 0.8. Nếu bạn muốn tạo cảm giác lãng mạn, chậm rãi kiểu “Slow Motion”, hãy giảm xuống 0.5.

Lời kết

Việc trang trí website dịp lễ tết không chỉ giúp giao diện đẹp hơn mà còn thể hiện sự chỉn chu, quan tâm đến trải nghiệm người dùng của chủ sở hữu. Với đoạn code hiệu ứng tuyết rơi HTML phiên bản Canvas này, hy vọng bạn sẽ có một giao diện lung linh, sang trọng mà vẫn đảm bảo hiệu suất kỹ thuật tối đa.

Nếu bạn gặp khó khăn trong quá trình cài đặt hoặc muốn tùy biến thêm các hiệu ứng khác (như thêm nhạc, ông già Noel bay…), đừng ngần ngại để lại bình luận bên dưới để TruongDevs hỗ trợ nhé. Chúc các bạn một mùa Giáng Sinh an lành và Website “bão đơn”!

Post a Comment