Tết tết tết đến rồi! Để trang trí cho website yêu của chúng ta, các bạn chỉ cần làm 1 vài thao tác nhỏ sau. Cách này áp dụng trên tất cả website như WordPress, Joomla, NukeViet hoặc Blogspot

Trong bài này có

1. Hiệu ứng pháo hoa

Phần HTML, chèn đâu cũng được

<canvas id="fireworksCanvas"></canvas>

Phần Javascript, nên chèn ở phẩn FOOTER, bỏ vào thẻ <script>..</script>

    const canvas = document.getElementById('fireworksCanvas');
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // Particle class to represent each particle in the firework
    class Particle {
      constructor(x, y, color, velocityX, velocityY, size, lifetime) {
        this.x = x;
        this.y = y;
        this.color = color;
        this.velocityX = velocityX;
        this.velocityY = velocityY;
        this.size = size;
        this.lifetime = lifetime;
      }

      // Update particle position and decrease lifetime
      update() {
        this.x += this.velocityX;
        this.y += this.velocityY;
        this.lifetime--;
        this.velocityY += 0.05; // gravity effect
      }

      // Draw the particle
      draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
      }
    }

    // Firework class to create and manage fireworks
    class Firework {
      constructor(x, y) {
        this.x = x;
        this.y = y;
        this.exploded = false;
        this.particles = [];
        this.velocityY = -3; // Chậm hơn, tốc độ di chuyển của pháo hoa
        this.velocityX = 0;
        this.createParticles();
      }

      // Create particles for the firework explosion
      createParticles() {
        const colors = ['#FF5733', '#33FF57', '#3357FF', '#FF33A1', '#FFFF33'];
        const particleCount = 50; // Giảm số lượng hạt pháo
        for (let i = 0; i < particleCount; i++) {
          const angle = Math.random() * Math.PI * 2;
          const velocity = Math.random() * 5 + 2;
          const velocityX = Math.cos(angle) * velocity;
          const velocityY = Math.sin(angle) * velocity;
          const size = Math.random() * 3 + 1;
          const lifetime = Math.random() * 50 + 50;
          const color = colors[Math.floor(Math.random() * colors.length)];
          this.particles.push(new Particle(this.x, this.y, color, velocityX, velocityY, size, lifetime));
        }
      }

      // Update and draw all particles
      update() {
        if (this.y <= canvas.height / 3 && !this.exploded) { this.exploded = true; // Explode when the rocket reaches the peak this.createParticles(); } if (!this.exploded) { this.y += this.velocityY; // Rise upwards } // Update particles after explosion this.particles.forEach((particle, index) => {
          particle.update();
          particle.draw();
          if (particle.lifetime <= 0) { this.particles.splice(index, 1); } }); } // Draw the rocket if it hasn't exploded yet draw() { if (!this.exploded) { ctx.beginPath(); ctx.arc(this.x, this.y, 5, 0, Math.PI * 2); ctx.fillStyle = '#FFFFFF'; // White color for the rocket ctx.fill(); } } } // Array to hold all fireworks const fireworks = []; // Create a new firework at random positions function createFirework() { const x = Math.random() * canvas.width; const y = canvas.height; fireworks.push(new Firework(x, y)); } // Animation loop function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); fireworks.forEach(firework => {
        firework.update();
        firework.draw();
      });
      requestAnimationFrame(animate);
    }

    // Create a firework every 1000ms (1s)
    setInterval(createFirework, 1000);

    // Start the animation
    animate();

2. Hoa mai 4 góc website

<img style="position:fixed;z-index:99999;top:0;left:0" src="https://lh3.googleusercontent.com/Nm43LAO21g0ua9Muu0BUELDCkQfCm4sOKIPlXTM3jScFEuuR2q89H4CBKx7bkbzyAvXA-MPb6bFlPXyRGnep6Y3IsBR171nGx3tkB2SD9zyw3qXlxj8iv7SHoP1t0YK-wSmIcg=w141-h143-no"/>
<img style="position:fixed;z-index:99999;top:0;right:0" src="https://lh3.googleusercontent.com/yfLzqRzZL5T5i20FJbhfXEjDjkUT3PshER0urEBiAq1Euy4NTMZBKnMsH8ni-R7ffM8a_mgua5IjbGnp4DWUXQDI_-mNaDfAkgcyFlNNa5u0kRqjaBtW077U47CWsJgNfhhk-g=w141-h143-no"/>
<img style="position:fixed;z-index:99999;bottom:0px;left:0px" src="https://lh3.googleusercontent.com/2U90SIgXGe2W0O2NPluq66u-98JcgCpKBmRvWDcniKdybBTjqIjB0Noq0UsRdG2oOTZlvVh26T1mU9e1nY8lTuOFrSru_saC4J6K6refpHTSJiCb_SykRe2i7MbHgj8q5ESMzg=w200-h159-no"/>
<img style="position:fixed;z-index:9999;bottom:0px;right:0px" src="https://lh3.googleusercontent.com/XH0FHlEyLBF5hzcgkDvSjKlInwSYZ5TUoBruIJoRNnXtezP4kCdi0S7_dwXhee-AbfoWL4g9osBMG32sG7u9Tc30NPOP61GpytphyxoFcZgknHoRm54BprHHO0Umd2q8PpV5Lw=w162-h167-no"/>

Thế là xong! Chúc các bạn thành công

Báo cáo
Shares: