Running Cats Animation

Running Cats Animation

body { font-family: 'Arial', sans-serif; background-color: #e8f5e9; margin: 0; padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .container { max-width: 800px; background-color: white; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); padding: 20px; text-align: center; } h1 { color: #f57c00; margin-bottom: 20px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); } .animation-container { margin: 20px 0; border: 1px solid #ddd; border-radius: 5px; overflow: hidden; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); } svg { width: 100%; height: auto; display: block; } .controls { margin-top: 20px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; } button { background-color: #f57c00; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; font-weight: bold; transition: all 0.3s; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } button:hover { background-color: #e65100; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } button:active { transform: scale(0.98) translateY(0); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } #add-cat { background-color: #4CAF50; } #add-cat:hover { background-color: #388E3C; } .cloud { opacity: 0.9; } @keyframes meow-animation { 0% { opacity: 0; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-20px); } 100% { opacity: 0; transform: translateY(-40px); } } .meow-text { animation: meow-animation 1s forwards; } @media (max-width: 600px) { .container { padding: 10px; } button { padding: 8px 12px; font-size: 14px; } } document.addEventListener('DOMContentLoaded', () => { // Get elements const cats = document.querySelectorAll('.cat'); const clouds = document.querySelectorAll('.cloud'); // Animation controls const toggleButton = document.getElementById('toggle-animation'); const speedUpButton = document.getElementById('speed-up'); const slowDownButton = document.getElementById('slow-down'); const addCatButton = document.getElementById('add-cat'); // Animation parameters let animationSpeed = 1; let isAnimating = true; let animationFrame; let position = 0; let catCount = 5; // We start with 5 cats // Cat colors for new cats const catColors = [ { body: '#E91E63', eyes: '#333' }, // Pink { body: '#9C27B0', eyes: '#FFF' }, // Purple { body: '#3F51B5', eyes: '#FFEB3B' }, // Indigo { body: '#009688', eyes: '#FF5722' }, // Teal { body: '#FF5722', eyes: '#2196F3' }, // Deep Orange { body: '#8BC34A', eyes: '#3E2723' }, // Light Green { body: '#FFEB3B', eyes: '#3E2723' }, // Yellow { body: '#607D8B', eyes: '#FFEB3B' } // Blue Grey ]; // Animation function function animate() { if (!isAnimating) return; position += animationSpeed; // Animate each cat cats.forEach((cat, index) => { // Different speeds and phases for each cat const catPhase = position + (index * 100); const catSpeed = 1 + (index * 0.1); // Get cat parts const legs = { frontLeft: cat.querySelector('.leg-front-left'), frontRight: cat.querySelector('.leg-front-right'), backLeft: cat.querySelector('.leg-back-left'), backRight: cat.querySelector('.leg-back-right') }; const body = cat.querySelector('.body'); const head = cat.querySelector('.head'); const tail = cat.querySelector('.tail'); // Leg animation - running cycle const legCycle = Math.sin(catPhase * 0.1 * catSpeed); const legCycleOffset = Math.cos(catPhase * 0.1 * catSpeed); // Front legs legs.frontLeft.setAttribute('x2', 450 + legCycle * 15); legs.frontLeft.setAttribute('y2', 350 + Math.abs(legCycle) * -10); legs.frontRight.setAttribute('x2', 470 + legCycleOffset * 15); legs.frontRight.setAttribute('y2', 350 + Math.abs(legCycleOffset) * -10); // Back legs legs.backLeft.setAttribute('x2', 350 + legCycleOffset * 15); legs.backLeft.setAttribute('y2', 350 + Math.abs(legCycleOffset) * -10); legs.backRight.setAttribute('x2', 390 + legCycle * 15); legs.backRight.setAttribute('y2', 350 + Math.abs(legCycle) * -10); // Body bounce const bodyY = 300 + Math.sin(catPhase * 0.2 * catSpeed) * 5; body.setAttribute('cy', bodyY); head.setAttribute('cy', bodyY - 30); // Tail wag const tailWag = Math.sin(catPhase * 0.15 * catSpeed) * 20; tail.setAttribute('d', `M330,${bodyY - 10} Q310,${bodyY - 40 + tailWag} 320,${bodyY - 70 + tailWag}`); // Horizontal movement for cats (except the first one) if (index > 0) { // Calculate a unique speed for each cat const horizontalSpeed = 0.3 + (index * 0.05); const horizontalMovement = Math.sin(position * horizontalSpeed) * (50 - index * 5); // Get current transform and update it const currentTransform = cat.getAttribute('transform'); const baseTransform = currentTransform.split('translate(')[1].split(')')[1]; const translateX = parseFloat(currentTransform.split('translate(')[1].split(',')[0]); const translateY = parseFloat(currentTransform.split('translate(')[1].split(',')[1].split(')')[0]); cat.setAttribute('transform', `translate(${translateX + horizontalMovement}, ${translateY})${baseTransform}`); } }); // Move clouds clouds.forEach((cloud, index) => { const cloudSpeed = 0.5 + (index * 0.2); const cloudX = -((position * cloudSpeed) % 1000); cloud.style.transform = `translateX(${cloudX}px)`; }); // Request next frame animationFrame = requestAnimationFrame(animate); } // Start animation animate(); // Toggle animation toggleButton.addEventListener('click', () => { isAnimating = !isAnimating; toggleButton.textContent = isAnimating ? 'Pause' : 'Play'; if (isAnimating) { animate(); } else { cancelAnimationFrame(animationFrame); } }); // Speed controls speedUpButton.addEventListener('click', () => { animationSpeed = Math.min(animationSpeed + 0.5, 3); }); slowDownButton.addEventListener('click', () => { animationSpeed = Math.max(animationSpeed - 0.5, 0.5); }); // Add cat functionality addCatButton.addEventListener('click', () => { // Get a random color from our palette const colorIndex = Math.floor(Math.random() * catColors.length); const catColor = catColors[colorIndex]; // Create a new cat createNewCat(catColor.body, catColor.eyes); }); // Function to create a new cat function createNewCat(bodyColor, eyeColor) { // Create a new cat group const newCat = document.createElementNS('http://www.w3.org/2000/svg', 'g'); newCat.classList.add('cat'); // Random position and scale const xPos = Math.random() * 400 - 200; // Between -200 and 200 const yPos = Math.random() * 60 - 30; // Between -30 and 30 const scale = 0.5 + Math.random() * 0.3; // Between 0.5 and 0.8 newCat.setAttribute('id', `cat-${++catCount}`); newCat.setAttribute('transform', `translate(${xPos}, ${yPos}) scale(${scale})`); // Cat body parts HTML newCat.innerHTML = ` `; // Add the new cat to the SVG document.getElementById('running-cats').appendChild(newCat); // Add click event for meowing newCat.addEventListener('click', (e) => { // Create a meow text element const meow = document.createElementNS('http://www.w3.org/2000/svg', 'text'); meow.setAttribute('x', e.clientX); meow.setAttribute('y', e.clientY); meow.setAttribute('fill', bodyColor); meow.setAttribute('font-size', '20'); meow.setAttribute('class', 'meow-text'); meow.textContent = 'Meow!'; // Add to SVG document.getElementById('running-cats').appendChild(meow); // Remove after animation setTimeout(() => { meow.remove(); }, 1000); }); } // Add click events to all cats for meowing cats.forEach(cat => { cat.addEventListener('click', (e) => { // Get the cat's color const body = cat.querySelector('.body'); const catColor = body.getAttribute('fill'); // Create a meow text element const meow = document.createElementNS('http://www.w3.org/2000/svg', 'text'); meow.setAttribute('x', e.clientX); meow.setAttribute('y', e.clientY); meow.setAttribute('fill', catColor); meow.setAttribute('font-size', '20'); meow.setAttribute('class', 'meow-text'); meow.textContent = 'Meow!'; // Add to SVG document.getElementById('running-cats').appendChild(meow); // Remove after animation setTimeout(() => { meow.remove(); }, 1000); }); }); });