Efect de Explozie cu Steluțe la Click și Mișcare ~ Blogul lui Petre Vitan

✨ PREVIZUALIZARE LIVE: Efect Explozie Steluțe ✨

Mișcă mouse-ul sau dă click în această zonă pentru a testa efectul!

<style>
/* Realizat de petre-vitan */
.star {
  position: fixed;
  pointer-events: none;
  background: white;
  border-radius: 50%;
  z-index: 99999;
  transform: scale(0);
}

@keyframes physicalExplode {
  0% { 
    transform: translate(0, 0) scale(1.2); 
    opacity: 1; 
  }
  60% {
    opacity: 1;
  }
  100% { 
    transform: translate(var(--x), var(--y)) scale(0.2); 
    opacity: 0; 
  }
}
</style>

<script>
// Realizat de petre-vitan
const colors = ['#ff0000', '#ffffff', '#0CF232', '#FCB045', '#9005ED', '#FD1D1D'];

function createStar(x, y, isClick = false) {
  const star = document.createElement("div");
  star.classList.add("star");
  
  const color = colors[Math.floor(Math.random() * colors.length)];
  const size = isClick ? (Math.random() * 8 + 4) : (Math.random() * 3 + 1);
  
  star.style.width = size + 'px';
  star.style.height = size + 'px';
  star.style.background = color;
  star.style.boxShadow = `0 0 15px ${color}, 0 0 25px ${color}`;
  
  star.style.left = x + 'px';
  star.style.top = y + 'px';

  const angle = Math.random() * Math.PI * 2;
  const distance = isClick ? (Math.random() * 350 + 100) : (Math.random() * 70 + 20); 

  star.style.setProperty('--x', (Math.cos(angle) * distance) + 'px');
  star.style.setProperty('--y', (Math.sin(angle) * distance) + 'px');

  document.body.appendChild(star);
  
  const duration = isClick ? 1.8 : 0.8;
  star.style.animation = `physicalExplode ${duration}s cubic-bezier(0.15, 0.85, 0.35, 1) forwards`;

  setTimeout(() => star.remove(), duration * 1000);
}

document.addEventListener("mousemove", (e) => {
  if (Math.random() > 0.8) { 
    createStar(e.clientX, e.clientY, false);
  }
});

const handleEvent = (e) => {
    const posX = e.clientX || (e.touches && e.touches ? e.touches.clientX : null);
    const posY = e.clientY || (e.touches && e.touches ? e.touches.clientY : null);
    
    if (posX && posY) {
        for (let i = 0; i < 40; i++) {
            createStar(posX, posY, true);
        }
    }
};

document.addEventListener("mousedown", handleEvent);
document.addEventListener("touchstart", handleEvent, {passive: true});
</script>

Efect de Explozie cu Steluțe la Click și Mișcare

Niciun comentariu:

Trimiteți un comentariu

Formular de contact

Nu rata nicio noutate! Abonează-te și primești articolele pe mail:

Articole la întâmplare

Blogul lui Nurilusa

Ultimile comentarii

Bine de stiut