Expanding Star Particles with JavaScript

Harness the power of JavaScript to create an expanding particle effect anywhere on your website.

Copy Code

<canvas id="star-canvas" style="z-index: 3; min-height: 100vh; position: fixed; top: 50%; left: 50%; min-width: 100vw; transform: translate(-50%, -50%);" ></canvas>

  <script>  
    // Particle configuration
    var particleCount = 300;
    var particleMaxSize = 4;
    var particleMinSize = 1;
    var particleSpeed = 200;

    // Get canvas element
    var canvas = document.getElementById('star-canvas');
    var ctx = canvas.getContext('2d');

    // Set canvas size
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // Generate particles at the center moving towards the edges
    var particles = [];
    for (var i = 0; i < particleCount; i++) {
      var angle = Math.random() * Math.PI * 2;
      var distance = Math.random() * canvas.width * 0.5;

      particles.push({
        x: canvas.width / 2,
        y: canvas.height / 2,
        size: Math.random() * (particleMaxSize - particleMinSize) + particleMinSize,
        vx: Math.cos(angle) * distance / particleSpeed,
        vy: Math.sin(angle) * distance / particleSpeed
      });
    }

    // Render particles on canvas
    function renderParticles() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      for (var i = 0; i < particles.length; i++) {
        var particle = particles[i];

        ctx.fillStyle = 'rgba(255, 255, 255, 1)';
        ctx.beginPath();
        ctx.arc(particle.x, particle.y, particle.size, 0, 2 * Math.PI, false);
        ctx.fill();

        // Move particles towards the edges
        particle.x += particle.vx;
        particle.y += particle.vy;

        // Reset particles that are off the screen
        if (
          particle.x < 0 ||
          particle.x > canvas.width ||
          particle.y < 0 ||
          particle.y > canvas.height
        ) {
          var angle = Math.random() * Math.PI * 2;
          var distance = Math.random() * canvas.width * 0.5;

          particles[i] = {
            x: canvas.width / 2,
            y: canvas.height / 2,
            size: Math.random() * (particleMaxSize - particleMinSize) + particleMinSize,
            vx: Math.cos(angle) * distance / particleSpeed,
            vy: Math.sin(angle) * distance / particleSpeed
          };
        }
      }
      requestAnimationFrame(renderParticles);
    }
    
    // Start rendering particles
    renderParticles();
  </script>

The set-up for this one is fairly simple, though you may need to adjust some of the code to your liking. See live example.

Copy this code and paste it into head tag in the page settings of your Webflow site. Then, you can either use the canvas element provided and style it the way you want (located at the top of tis code), or you can create your own element with the id of "star-canvas" and style that however you like.

Just make sure if you're going to use your own element with an id of star-canvas that you erase the <canvas> code I provided.

The set up can take a little bit of trial and error, but as long as you have an element that's got a definitive size and position on the page, when you publish the website you should see it working.

Feel free to experiment with the number values in the //Particle configuration. Use the "ctx.fillStyle = 'rgba(255, 255, 255, 1)';" section of the code to change the color and opacity of the particles.