Embed

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Interaktive Partikel</title>
  <style>
    body, html {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
    }
    #particles-js {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #f0f0f0;
    }
    .content {
      position: relative;
      z-index: 1;
      color: #333;
      text-align: center;
      top: 50%;
      transform: translateY(-50%);
    }
  </style>
</head>
<body>
  <div id="particles-js"></div>
  <div class="content">
    <h1>Willkommen hier entsteht was großes</h1>
    <p>Interagiere mit dem Hintergrund!</p>
  </div>

  
  <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
  <script>
    particlesJS("particles-js", {
      "particles": {
        "number": { "value": 80, "density": { "enable": true, "value_area": 800 } },
        "color": { "value": "#3498db" },
        "shape": {
          "type": "circle",
          "stroke": { "width": 0, "color": "#000000" },
        },
        "opacity": { "value": 0.5, "random": false },
        "size": { "value": 3, "random": true },
        "line_linked": { "enable": true, "distance": 150, "color": "#3498db", "opacity": 0.4, "width": 1 },
        "move": { "enable": true, "speed": 6, "direction": "none", "random": false, "straight": false }
      },
      "interactivity": {
        "detect_on": "canvas",
        "events": {
          "onhover": { "enable": true, "mode": "repulse" },
          "onclick": { "enable": true, "mode": "push" },
          "resize": true
        },
        "modes": {
          "repulse": { "distance": 100, "duration": 0.4 },
          "push": { "particles_nb": 4 }
        }
      },
      "retina_detect": true
    });
  </script>
</body>
</html>

HG AGENTUR