WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animation de cœur explosif cliquable
493
Viiper10
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
10 August 2024
Filtre de galerie
28 November 2024
Effet de la carte
17 July 2025
Art polygonal SVG : code graphique vectoriel
HTML
Copy
Cœur Explosif Géant
0 / 10
CSS
Copy
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
Copy
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; } function resetGame() { clickCount = 0; clickCounterDisplay.textContent = `${clickCount} / ${MAX_CLICKS}`; heartIcon.classList.remove('heart-hidden'); heartIcon.style.transform = `scale(1)`; particlesContainer.innerHTML = ''; heartButton.addEventListener('click', handleHeartClick); } heartButton.addEventListener('click', handleHeartClick);