Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PixelPulse Arena | Ultimate Gaming Hub</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Roboto:wght@400;700&display=swap'); | |
| body { | |
| font-family: 'Roboto', sans-serif; | |
| } | |
| .pixel-font { | |
| font-family: 'Press Start 2P', cursive; | |
| } | |
| .game-card { | |
| transition: all 0.3s ease; | |
| transform-style: preserve-3d; | |
| } | |
| .game-card:hover { | |
| transform: translateY(-10px) scale(1.02); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5); | |
| } | |
| #vanta-bg { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white"> | |
| <div id="vanta-bg"></div> | |
| <!-- Navigation --> | |
| <nav class="bg-black bg-opacity-80 backdrop-blur-md sticky top-0 z-50"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <span class="pixel-font text-2xl text-purple-500">PIXELPULSE</span> | |
| <span class="pixel-font text-2xl text-white">ARENA</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#" class="text-white hover:text-purple-400 transition">Home</a> | |
| <a href="#" class="text-white hover:text-purple-400 transition">Games</a> | |
| <a href="#" class="text-white hover:text-purple-400 transition">News</a> | |
| <a href="#" class="text-white hover:text-purple-400 transition">Esports</a> | |
| <a href="#" class="text-white hover:text-purple-400 transition">Community</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-md transition"> | |
| Sign In | |
| </button> | |
| <button class="md:hidden"> | |
| <i data-feather="menu" class="text-white"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative h-screen flex items-center justify-center overflow-hidden"> | |
| <div class="absolute inset-0 bg-black bg-opacity-60"></div> | |
| <div class="container mx-auto px-6 z-10 text-center"> | |
| <h1 class="pixel-font text-4xl md:text-6xl lg:text-7xl mb-6 text-purple-400">GAME ON</h1> | |
| <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto"> | |
| Discover the hottest games, join epic tournaments, and connect with gamers worldwide. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <button class="bg-purple-600 hover:bg-purple-700 px-6 py-3 rounded-md text-lg font-semibold transition transform hover:scale-105"> | |
| Explore Games | |
| </button> | |
| <button class="bg-transparent border-2 border-purple-500 hover:bg-purple-900 hover:bg-opacity-30 px-6 py-3 rounded-md text-lg font-semibold transition transform hover:scale-105"> | |
| Join Community | |
| </button> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-10 left-0 right-0 text-center"> | |
| <i data-feather="chevron-down" class="animate-bounce mx-auto text-purple-400"></i> | |
| </div> | |
| </section> | |
| <!-- Featured Games --> | |
| <section class="py-20 bg-gray-800 bg-opacity-50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="pixel-font text-3xl md:text-4xl mb-12 text-center text-purple-400">FEATURED GAMES</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Game Card 1 --> | |
| <div class="game-card bg-gray-900 rounded-lg overflow-hidden border border-gray-700"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="http://static.photos/gaming/640x360/1" alt="Game Cover" class="w-full h-full object-cover"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <span class="bg-purple-600 text-xs px-2 py-1 rounded">NEW RELEASE</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Shadow Legends</h3> | |
| <p class="text-gray-400 text-sm mb-4">Action RPG • Open World</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 mr-1"></i> | |
| <span>4.8</span> | |
| </div> | |
| <button class="text-purple-400 hover:text-purple-300 transition"> | |
| <i data-feather="plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Card 2 --> | |
| <div class="game-card bg-gray-900 rounded-lg overflow-hidden border border-gray-700"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="http://static.photos/gaming/640x360/2" alt="Game Cover" class="w-full h-full object-cover"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <span class="bg-blue-600 text-xs px-2 py-1 rounded">ESPORTS</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Neon Warfare</h3> | |
| <p class="text-gray-400 text-sm mb-4">FPS • Competitive</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 mr-1"></i> | |
| <span>4.9</span> | |
| </div> | |
| <button class="text-purple-400 hover:text-purple-300 transition"> | |
| <i data-feather="plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Card 3 --> | |
| <div class="game-card bg-gray-900 rounded-lg overflow-hidden border border-gray-700"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="http://static.photos/gaming/640x360/3" alt="Game Cover" class="w-full h-full object-cover"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <span class="bg-green-600 text-xs px-2 py-1 rounded">FREE TO PLAY</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Pixel Heroes</h3> | |
| <p class="text-gray-400 text-sm mb-4">Adventure • Multiplayer</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i data-feather="star" class="w-4 h-4 text-yellow-400 mr-1"></i> | |
| <span>4.7</span> | |
| </div> | |
| <button class="text-purple-400 hover:text-purple-300 transition"> | |
| <i data-feather="plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <button class="border border-purple-500 text-purple-400 hover:bg-purple-900 hover:bg-opacity-30 px-6 py-3 rounded-md transition"> | |
| View All Games | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Live Streams --> | |
| <section class="py-20 bg-gray-900"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row items-center justify-between mb-12"> | |
| <h2 class="pixel-font text-3xl md:text-4xl text-purple-400">LIVE STREAMS</h2> | |
| <div class="flex space-x-4 mt-4 md:mt-0"> | |
| <button class="px-4 py-2 bg-purple-600 rounded-md">All</button> | |
| <button class="px-4 py-2 bg-gray-800 rounded-md">FPS</button> | |
| <button class="px-4 py-2 bg-gray-800 rounded-md">RPG</button> | |
| <button class="px-4 py-2 bg-gray-800 rounded-md">MOBA</button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Stream Card 1 --> | |
| <div class="bg-gray-800 rounded-lg overflow-hidden border border-gray-700 transition hover:border-purple-500"> | |
| <div class="relative"> | |
| <img src="http://static.photos/gaming/640x360/4" alt="Stream Thumbnail" class="w-full h-48 object-cover"> | |
| <div class="absolute top-2 left-2 bg-red-600 text-xs px-2 py-1 rounded flex items-center"> | |
| <div class="w-2 h-2 bg-white rounded-full mr-1"></div> | |
| LIVE | |
| </div> | |
| <div class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-xs px-2 py-1 rounded"> | |
| 12.5K viewers | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-start space-x-3"> | |
| <img src="http://static.photos/people/200x200/1" alt="Streamer Avatar" class="w-10 h-10 rounded-full"> | |
| <div> | |
| <h3 class="font-bold">ShadowAssault Gameplay</h3> | |
| <p class="text-sm text-gray-400">ProPlayerX</p> | |
| </div> | |
| </div> | |
| <div class="mt-3 flex items-center text-sm text-gray-400"> | |
| <i data-feather="user" class="w-4 h-4 mr-1"></i> | |
| <span>12,543</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stream Card 2 --> | |
| <div class="bg-gray-800 rounded-lg overflow-hidden border border-gray-700 transition hover:border-purple-500"> | |
| <div class="relative"> | |
| <img src="http://static.photos/gaming/640x360/5" alt="Stream Thumbnail" class="w-full h-48 object-cover"> | |
| <div class="absolute top-2 left-2 bg-red-600 text-xs px-2 py-1 rounded flex items-center"> | |
| <div class="w-2 h-2 bg-white rounded-full mr-1"></div> | |
| LIVE | |
| </div> | |
| <div class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-xs px-2 py-1 rounded"> | |
| 8.2K viewers | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-start space-x-3"> | |
| <img src="http://static.photos/people/200x200/2" alt="Streamer Avatar" class="w-10 h-10 rounded-full"> | |
| <div> | |
| <h3 class="font-bold">NeonWarfare Tournament</h3> | |
| <p class="text-sm text-gray-400">GamingQueen</p> | |
| </div> | |
| </div> | |
| <div class="mt-3 flex items-center text-sm text-gray-400"> | |
| <i data-feather="user" class="w-4 h-4 mr-1"></i> | |
| <span>8,243</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stream Card 3 --> | |
| <div class="bg-gray-800 rounded-lg overflow-hidden border border-gray-700 transition hover:border-purple-500"> | |
| <div class="relative"> | |
| <img src="http://static.photos/gaming/640x360/6" alt="Stream Thumbnail" class="w-full h-48 object-cover"> | |
| <div class="absolute top-2 left-2 bg-red-600 text-xs px-2 py-1 rounded flex items-center"> | |
| <div class="w-2 h-2 bg-white rounded-full mr-1"></div> | |
| LIVE | |
| </div> | |
| <div class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-xs px-2 py-1 rounded"> | |
| 6.7K viewers | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-start space-x-3"> | |
| <img src="http://static.photos/people/200x200/3" alt="Streamer Avatar" class="w-10 h-10 rounded-full"> | |
| <div> | |
| <h3 class="font-bold">PixelHeroes Adventure</h3> | |
| <p class="text-sm text-gray-400">RetroGamer</p> | |
| </div> | |
| </div> | |
| <div class="mt-3 flex items-center text-sm text-gray-400"> | |
| <i data-feather="user" class="w-4 h-4 mr-1"></i> | |
| <span>6,723</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- News Section --> | |
| <section class="py-20 bg-gray-800 bg-opacity-50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="pixel-font text-3xl md:text-4xl mb-12 text-center text-purple-400">GAMING NEWS</h2> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- News Card 1 --> | |
| <div class="bg-gray-900 rounded-lg overflow-hidden border border-gray-700"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="http://static.photos/technology/640x360/1" alt="News Image" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center text-sm text-gray-400 mb-2"> | |
| <span>2 hours ago</span> | |
| <span class="mx-2">•</span> | |
| <span>Industry</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Next-Gen Console Specs Revealed</h3> | |
| <p class="text-gray-400 mb-4">The upcoming console promises 8K resolution at 120FPS with revolutionary new architecture...</p> | |
| <a href="#" class="text-purple-400 hover:text-purple-300 flex items-center transition"> | |
| Read More <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- News Card 2 --> | |
| <div class="bg-gray-900 rounded-lg overflow-hidden border border-gray-700"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="http://static.photos/technology/640x360/2" alt="News Image" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center text-sm text-gray-400 mb-2"> | |
| <span>5 hours ago</span> | |
| <span class="mx-2">•</span> | |
| <span>Esports</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">World Championship Finals Announced</h3> | |
| <p class="text-gray-400 mb-4">The $5 million tournament will take place in Berlin with 16 top teams competing...</p> | |
| <a href="#" class="text-purple-400 hover:text-purple-300 flex items-center transition"> | |
| Read More <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- News Card 3 --> | |
| <div class="bg-gray-900 rounded-lg overflow-hidden border border-gray-700"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="http://static.photos/technology/640x360/3" alt="News Image" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center text-sm text-gray-400 mb-2"> | |
| <span>1 day ago</span> | |
| <span class="mx-2">•</span> | |
| <span>Update</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Major Game Expansion Coming Next Month</h3> | |
| <p class="text-gray-400 mb-4">The developers have announced a massive new expansion with 10+ hours of content...</p> | |
| <a href="#" class="text-purple-400 hover:text-purple-300 flex items-center transition"> | |
| Read More <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Community Section --> | |
| <section class="py-20 bg-gray-900"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center max-w-3xl mx-auto mb-16"> | |
| <h2 class="pixel-font text-3xl md:text-4xl mb-6 text-purple-400">JOIN OUR COMMUNITY</h2> | |
| <p class="text-lg text-gray-400"> | |
| Connect with millions of gamers worldwide. Share strategies, team up for matches, and discuss the latest gaming trends. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Community Feature 1 --> | |
| <div class="bg-gray-800 p-8 rounded-lg border border-gray-700 text-center"> | |
| <div class="bg-purple-900 bg-opacity-30 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i data-feather="users" class="w-8 h-8 text-purple-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Find Squad Mates</h3> | |
| <p class="text-gray-400"> | |
| Connect with players who match your skill level and play style for the ultimate team experience. | |
| </p> | |
| </div> | |
| <!-- Community Feature 2 --> | |
| <div class="bg-gray-800 p-8 rounded-lg border border-gray-700 text-center"> | |
| <div class="bg-purple-900 bg-opacity-30 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i data-feather="message-square" class="w-8 h-8 text-purple-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Active Forums</h3> | |
| <p class="text-gray-400"> | |
| Discuss strategies, share fan art, or just chat about your favorite games with like-minded gamers. | |
| </p> | |
| </div> | |
| <!-- Community Feature 3 --> | |
| <div class="bg-gray-800 p-8 rounded-lg border border-gray-700 text-center"> | |
| <div class="bg-purple-900 bg-opacity-30 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i data-feather="award" class="w-8 h-8 text-purple-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Tournaments</h3> | |
| <p class="text-gray-400"> | |
| Compete in regular tournaments with cash prizes and exclusive in-game rewards. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="text-center mt-16"> | |
| <button class="bg-purple-600 hover:bg-purple-700 px-8 py-4 rounded-md text-lg font-semibold transition transform hover:scale-105"> | |
| Sign Up Now - It's Free! | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-black bg-opacity-80 py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <span class="pixel-font text-xl text-purple-500">PIXELPULSE</span> | |
| <span class="pixel-font text-xl text-white">ARENA</span> | |
| </div> | |
| <p class="text-gray-400 text-sm"> | |
| The ultimate destination for gamers worldwide. Discover, play, compete and connect. | |
| </p> | |
| <div class="flex space-x-4 mt-6"> | |
| <a href="#" class="text-gray-400 hover:text-purple-400 transition"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-purple-400 transition"> | |
| <i data-feather="facebook"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-purple-400 transition"> | |
| <i data-feather="instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-purple-400 transition"> | |
| <i data-feather="twitch"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-purple-400 transition"> | |
| <i data-feather="youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-semibold mb-4">Explore</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Games</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">News</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Reviews</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Guides</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Release Calendar</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-semibold mb-4">Community</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Forums</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Clubs</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Tournaments</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Streamers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Leaderboards</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-semibold mb-4">Company</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Support</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Contact</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-purple-400 transition">Privacy Policy</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-500 text-sm"> | |
| © 2023 PixelPulse Arena. All rights reserved. | |
| </p> | |
| <div class="flex space-x-6 mt-4 md:mt-0"> | |
| <a href="#" class="text-gray-500 hover:text-purple-400 text-sm transition">Terms of Service</a> | |
| <a href="#" class="text-gray-500 hover:text-purple-400 text-sm transition">Privacy Policy</a> | |
| <a href="#" class="text-gray-500 hover:text-purple-400 text-sm transition">Cookie Policy</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x7e22ce, | |
| backgroundColor: 0x111827, | |
| size: 0.8 | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| // Simple animation for hero section | |
| anime({ | |
| targets: '.pixel-font', | |
| translateY: [-20, 0], | |
| opacity: [0, 1], | |
| duration: 1500, | |
| easing: 'easeOutExpo', | |
| delay: anime.stagger(100) | |
| }); | |
| // Animation for game cards on scroll | |
| const gameCards = document.querySelectorAll('.game-card'); | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| anime({ | |
| targets: entry.target, | |
| opacity: [0, 1], | |
| translateY: [50, 0], | |
| duration: 800, | |
| easing: 'easeOutExpo' | |
| }); | |
| observer.unobserve(entry.target); | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| gameCards.forEach(card => { | |
| observer.observe(card); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |