Animação de coração explosivo clicável

55 Viiper10

Abrir no Editor Publique Seu Código

Recomendado

25 November 2024

Site responsivo de dados de alunos

14 June 2025

Um Código de Metehan

30 May 2025

Formulário de inscrição / login

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

Site responsivo de dados de alunos

Um Código de Metehan

Formulário de inscrição / login

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS