Parçacık Dalga Efekti

<style>
.particle-container {
  position: relative;
  width: 100%;
  height: 300px;
  background-color: #000;
  overflow: hidden;
}

.particle {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s, opacity 0.3s;
}
</style>

<div class="particle-container" id="particleContainer"></div>

<script>
const container = document.getElementById("particleContainer");
const particles = [];
const particleCount = 100;
const maxDistance = 100;

// Parçacıkları oluştur
for (let i = 0; i < particleCount; i++) {
  const particle = document.createElement("div");
  particle.classList.add("particle");
  
  // Rastgele pozisyon
  const x = Math.random() * container.offsetWidth;
  const y = Math.random() * container.offsetHeight;
  
  particle.style.left = `${x}px`;
  particle.style.top = `${y}px`;
  particle.style.width = "4px";
  particle.style.height = "4px";
  
  container.appendChild(particle);
  
  particles.push({
    element: particle,
    x: x,
    y: y,
    size: 4
  });
}

container.addEventListener("mousemove", (e) => {
  const rect = container.getBoundingClientRect();
  const mouseX = e.clientX - rect.left;
  const mouseY = e.clientY - rect.top;
  
  particles.forEach(particle => {
    // Fare ile parçacık arasındaki mesafeyi hesapla
    const dx = mouseX - particle.x;
    const dy = mouseY - particle.y;
    const distance = Math.sqrt(dx * dx + dy * dy);
    
    if (distance < maxDistance) {
      // Mesafeye göre boyut ve opaklık ayarla
      const scale = 1 - (distance / maxDistance);
      const size = 4 + (scale * 20);
      const opacity = 0.3 + (scale * 0.7);
      
      particle.element.style.width = `${size}px`;
      particle.element.style.height = `${size}px`;
      particle.element.style.opacity = opacity;
    } else {
      // Varsayılan boyut ve opaklık
      particle.element.style.width = "4px";
      particle.element.style.height = "4px";
      particle.element.style.opacity = "0.3";
    }
  });
});
</script>