Animation de cœur explosif cliquable

1,228 Viiper10

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Recommandé

22 August 2024

Carte animée avec effet de survol 3D

18 May 2026

Formulaire de connexion et d'inscription HTML/CSS

8 April 2026

Minecraft masqué débloqué

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; 
    }
}

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);