Animación de corazón explosivo interactiva

51 Viiper10

Abrir en el editor Publica tu código

Animación de corazón explosivo interactiva

Recomendado

14 September 2024

Control deslizante flotante

23 August 2025

Soluciones de redes informáticas | Ciberseguridad - NetMasters

22 September 2025

Fragmento de animación HTML de Neuron

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cœur Explosif Géant</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

CSS

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0; 
    font-family: sans-serif;
    overflow: hidden; 
}

.heart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative; 
    width: 400px;
    height: 400px; 
    justify-content: center; 
}

#click-counter {
    position: absolute; 
    top: -50px; 
    font-size: 28px; 
    font-weight: bold;
    color: #333;
    z-index: 10;
}

#heart-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s ease-out; 
    position: relative;
    z-index: 10;
}

.heart-icon {
    width: 400px; 
    height: 400px; 
    fill: #CC3A3A; 
    transition: transform 0.2s ease-out, opacity 0.5s;
    transform-origin: center;
}

.heart-hidden {
    opacity: 0 !important;
    transform: scale(0) !important;
}

#particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; 
}

.particle {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%); 
    
    width: 30px; 
    height: 30px;
    fill: #FF69B4; 
    opacity: 0; 
    transition: opacity 0.5s; 
    pointer-events: none; 
}

@keyframes explode {
    0% {
        transform: translate(-50%, -50%) scale(1); 
        opacity: 1;
    }
    100% {
        transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(0.2); 
        opacity: 0; 
    }
}

JS

const heartButton = document.getElementById('heart-button');
const heartIcon = document.querySelector('.heart-icon');
const clickCounterDisplay = document.getElementById('click-counter');
const particlesContainer = document.getElementById('particles-container');

let clickCount = 0;
const MAX_CLICKS = 10;
const INITIAL_SIZE = 400;

function handleHeartClick() {
    if (clickCount >= MAX_CLICKS) {
        return; 
    }

clickCount++;
    clickCounterDisplay.textContent = `${clickCount} / ${MAX_CLICKS}`;

const scaleFactor = 1 + (clickCount * 0.1); 
    heartIcon.style.transform = `scale(${scaleFactor})`;

if (clickCount === MAX_CLICKS) {
        explodeHeart();
    }
}

function explodeHeart() {
    heartIcon.classList.add('heart-hidden');
    heartButton.removeEventListener('click', handleHeartClick);

const NUMBER_OF_PARTICLES = 1000; // Nombre de petits cœurs à faire exploser
    const EXPLOSION_RADIUS = 890; // Rayon de l'explosion en pixels

for (let i = 0; i < NUMBER_OF_PARTICLES; i++) {
        const particle = createParticle();
        particlesContainer.appendChild(particle);

const angle = Math.random() * Math.PI * 2;
        const distance = Math.random() * EXPLOSION_RADIUS;

const randomX = Math.cos(angle) * distance;
        const randomY = Math.sin(angle) * distance;

particle.style.setProperty('--x', `${randomX}px`);
        particle.style.setProperty('--y', `${randomY}px`);
        
        const delay = Math.random() * 0.3;
        particle.style.animation = `explode 1.2s ease-out ${delay}s forwards`;
    }

setTimeout(resetGame, 2000);
}

function createParticle() {
    const svgPath = heartIcon.querySelector('path').cloneNode(true);
    
    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    svg.setAttribute('viewBox', heartIcon.getAttribute('viewBox'));
    svg.setAttribute('class', 'particle');
    svg.appendChild(svgPath);

return svg;
}

heartButton.addEventListener('click', handleHeartClick);

Recomendado

Control deslizante flotante

Soluciones de redes informáticas | Ciberseguridad - NetMasters

Fragmento de animación HTML de Neuron

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS