Super Awesome Pokémon Animations

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); body { background: #000; color: #fff; font-family: 'Press Start 2P', monospace; margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; } #app { text-align: center; width: 100vw; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; } h1 { font-size: 2rem; margin-bottom: 2rem; letter-spacing: 2px; text-shadow: 0 0 10px #ffde00, 0 0 20px #3b4cca; } #pokemon-container { display: flex; align-items: center; justify-content: center; min-height: 350px; min-width: 350px; margin-bottom: 2rem; position: relative; } .pokemon-card { background: rgba(30, 30, 30, 0.95); border-radius: 24px; box-shadow: 0 0 32px 8px #3b4cca55, 0 0 0 4px #ffde00; padding: 2rem 2.5rem 1.5rem 2.5rem; display: flex; flex-direction: column; align-items: center; animation: popIn 0.7s cubic-bezier(.68,-0.55,.27,1.55); position: relative; min-width: 320px; } @keyframes popIn { 0% { transform: scale(0.7) rotate(-10deg); opacity: 0; } 70% { transform: scale(1.1) rotate(3deg); opacity: 1; } 100% { transform: scale(1) rotate(0deg); } } .pokemon-img { width: 180px; height: 180px; image-rendering: pixelated; filter: drop-shadow(0 0 32px #ffde00cc) drop-shadow(0 0 8px #3b4cca); animation: float 2.2s ease-in-out infinite alternate; background: transparent; margin-bottom: 1.2rem; } @keyframes float { 0% { transform: translateY(0) scale(1); } 100% { transform: translateY(-24px) scale(1.05); } } .pokemon-name { font-size: 1.2rem; letter-spacing: 1px; margin-bottom: 0.5rem; color: #ffde00; text-shadow: 0 0 8px #3b4cca; } .pokemon-id { font-size: 0.9rem; color: #aaa; margin-bottom: 0.7rem; } .pokemon-types { display: flex; gap: 0.7rem; margin-bottom: 0.7rem; } .type-badge { padding: 0.3rem 0.8rem; border-radius: 12px; font-size: 0.8rem; font-weight: bold; color: #fff; text-shadow: 0 0 4px #000; border: 2px solid #fff2; box-shadow: 0 0 8px 2px #fff2; background: linear-gradient(90deg, #3b4cca 60%, #ffde00 100%); transition: background 0.3s; } .type-fire { background: linear-gradient(90deg, #fd7d24 60%, #ffa726 100%); } .type-water { background: linear-gradient(90deg, #4592c4 60%, #76baff 100%); } .type-grass { background: linear-gradient(90deg, #9bcc50 60%, #43ea7f 100%); } .type-electric { background: linear-gradient(90deg, #eed535 60%, #ffde00 100%); color: #222; } .type-psychic { background: linear-gradient(90deg, #f366b9 60%, #ffb6e6 100%); } .type-ice { background: linear-gradient(90deg, #51c4e7 60%, #b3f1ff 100%); } .type-dragon { background: linear-gradient(90deg, #53a4cf 60%, #f16e57 100%); } .type-dark { background: linear-gradient(90deg, #707070 60%, #1a1a1a 100%); } .type-fairy { background: linear-gradient(90deg, #fdb9e9 60%, #fff0f6 100%); color: #222; } .type-normal { background: linear-gradient(90deg, #a4acaf 60%, #e0e0e0 100%); color: #222; } .type-fighting { background: linear-gradient(90deg, #d56723 60%, #ffb6b6 100%); } .type-flying { background: linear-gradient(90deg, #3dc7ef 60%, #bdb9b8 100%); } .type-poison { background: linear-gradient(90deg, #b97fc9 60%, #e0b3ff 100%); } .type-ground { background: linear-gradient(90deg, #f7de3f 60%, #ab9842 100%); color: #222; } .type-rock { background: linear-gradient(90deg, #a38c21 60%, #e2c275 100%); color: #222; } .type-bug { background: linear-gradient(90deg, #729f3f 60%, #b4e07a 100%); } .type-ghost { background: linear-gradient(90deg, #7b62a3 60%, #b8a3e0 100%); } .type-steel { background: linear-gradient(90deg, #9eb7b8 60%, #d1e0e0 100%); color: #222; } .pokemon-anim-effect { position: absolute; left: 50%; top: 50%; pointer-events: none; z-index: 1; transform: translate(-50%, -50%); opacity: 0.7; animation: effectPulse 1.2s cubic-bezier(.68,-0.55,.27,1.55) infinite alternate; } @keyframes effectPulse { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; } 100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.3; } } #controls { display: flex; gap: 1.5rem; justify-content: center; margin-top: 1rem; } #controls button { background: #3b4cca; color: #ffde00; border: none; border-radius: 8px; font-family: 'Press Start 2P', monospace; font-size: 1rem; padding: 0.7rem 1.5rem; cursor: pointer; box-shadow: 0 0 8px #ffde00cc; transition: background 0.2s, color 0.2s, transform 0.1s; } #controls button:hover { background: #ffde00; color: #3b4cca; transform: scale(1.07); } // List of Pokémon to animate (Gen 1 starters + Pikachu + Gengar + Mewtwo) const pokemonList = [ 1, // Bulbasaur 4, // Charmander 7, // Squirtle 25, // Pikachu 94, // Gengar 131, // Lapras 143, // Snorlax 150, // Mewtwo 151 // Mew ]; let currentIndex = 0; const container = document.getElementById('pokemon-container'); const prevBtn = document.getElementById('prev-btn'); const nextBtn = document.getElementById('next-btn'); function capitalize(str) { return str.charAt(0).toUpperCase() + str.slice(1); } function getTypeClass(type) { return `type-badge type-${type}`; } function getAnimEffect(type) { // Returns SVG string for a cool effect based on type switch (type) { case 'fire': return ` `; case 'water': return ` `; case 'electric': return ` `; case 'psychic': return ` `; case 'ghost': return ` `; case 'ice': return ` `; case 'dragon': return ` `; default: return ` `; } } async function fetchPokemon(id) { const res = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}`); if (!res.ok) throw new Error('Failed to fetch Pokémon'); return await res.json(); } function renderPokemon(pokemon) { container.innerHTML = ''; const card = document.createElement('div'); card.className = 'pokemon-card'; // Main type for effect const mainType = pokemon.types[0].type.name; // Animated effect const effectDiv = document.createElement('div'); effectDiv.className = 'pokemon-anim-effect'; effectDiv.innerHTML = getAnimEffect(mainType); card.appendChild(effectDiv); // Sprite const img = document.createElement('img'); img.className = 'pokemon-img'; img.src = pokemon.sprites.other['official-artwork'].front_default || pokemon.sprites.front_default; img.alt = pokemon.name; card.appendChild(img); // Name const name = document.createElement('div'); name.className = 'pokemon-name'; name.textContent = capitalize(pokemon.name); card.appendChild(name); // ID const idDiv = document.createElement('div'); idDiv.className = 'pokemon-id'; idDiv.textContent = `#${pokemon.id.toString().padStart(3, '0')}`; card.appendChild(idDiv); // Types const typesDiv = document.createElement('div'); typesDiv.className = 'pokemon-types'; pokemon.types.forEach(t => { const badge = document.createElement('span'); badge.className = getTypeClass(t.type.name); badge.textContent = capitalize(t.type.name); typesDiv.appendChild(badge); }); card.appendChild(typesDiv); container.appendChild(card); } async function showPokemon(index) { container.innerHTML = '

'; try { const pokemon = await fetchPokemon(pokemonList[index]); renderPokemon(pokemon); } catch (e) { container.innerHTML = '

Failed to load Pokémon.

'; } } prevBtn.addEventListener('click', () => { currentIndex = (currentIndex - 1 + pokemonList.length) % pokemonList.length; showPokemon(currentIndex); }); nextBtn.addEventListener('click', () => { currentIndex = (currentIndex + 1) % pokemonList.length; showPokemon(currentIndex); }); // Keyboard navigation document.addEventListener('keydown', e => { if (e.key === 'ArrowLeft') prevBtn.click(); if (e.key === 'ArrowRight') nextBtn.click(); }); // Initial load showPokemon(currentIndex);