Spaces:
Running
Running
tolong diperbaiki sidebar di tampilan mobile agar lebih menarik lagi tampilannya - Follow Up Deployment
471a543 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Smooth Animations Showcase</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#6366f1', | |
| secondary: '#8b5cf6', | |
| dark: '#1e293b', | |
| }, | |
| animation: { | |
| 'spin-slow': 'spin 3s linear infinite', | |
| 'bounce-slow': 'bounce 2s infinite', | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'wave': 'wave 1.5s ease-in-out infinite', | |
| 'shake': 'shake 0.5s ease-in-out infinite', | |
| 'swing': 'swing 2s ease-in-out infinite', | |
| 'flash': 'flash 2s ease-in-out infinite', | |
| 'jump': 'jump 0.5s ease infinite', | |
| 'fade-in': 'fadeIn 1s ease-in forwards', | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-20px)' }, | |
| }, | |
| wave: { | |
| '0%, 100%': { transform: 'rotate(0deg)' }, | |
| '25%': { transform: 'rotate(5deg)' }, | |
| '75%': { transform: 'rotate(-5deg)' }, | |
| }, | |
| shake: { | |
| '0%, 100%': { transform: 'translateX(0)' }, | |
| '10%, 30%, 50%, 70%, 90%': { transform: 'translateX(-5px)' }, | |
| '20%, 40%, 60%, 80%': { transform: 'translateX(5px)' }, | |
| }, | |
| swing: { | |
| '0%': { transform: 'rotate(0deg)' }, | |
| '25%': { transform: 'rotate(10deg)' }, | |
| '50%': { transform: 'rotate(-10deg)' }, | |
| '75%': { transform: 'rotate(5deg)' }, | |
| '100%': { transform: 'rotate(0deg)' }, | |
| }, | |
| flash: { | |
| '0%, 50%, 100%': { opacity: 1 }, | |
| '25%, 75%': { opacity: 0.3 }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| /* Particles animation */ | |
| .particles { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 0; | |
| overflow: hidden; | |
| } | |
| .particle { | |
| position: absolute; | |
| background: rgba(255, 255, 255, 0.5); | |
| border-radius: 50%; | |
| pointer-events: none; | |
| } | |
| @keyframes float-up { | |
| 0% { | |
| transform: translateY(100vh) scale(0); | |
| opacity: 0; | |
| } | |
| 10% { | |
| opacity: 1; | |
| } | |
| 90% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translateY(-10vh) scale(1); | |
| opacity: 0; | |
| } | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| /* Mobile menu transitions */ | |
| #mobileMenu { | |
| transition: transform 0.3s ease-out; | |
| } | |
| #mobileMenuOverlay { | |
| transition: opacity 0.3s ease; | |
| } | |
| /* Prevent scrolling when menu is open */ | |
| body.menu-open { | |
| overflow: hidden; | |
| } | |
| header { | |
| transition: all 0.3s ease; | |
| background: rgba(15, 23, 42, 0.8); | |
| backdrop-filter: blur(10px); | |
| } | |
| header.scrolled { | |
| padding: 0.5rem 0; | |
| box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); | |
| } | |
| body { | |
| background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); | |
| color: #e2e8f0; | |
| overflow-x: hidden; | |
| } | |
| .hero-pattern { | |
| background: radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.1) 0%, transparent 20%), | |
| radial-gradient(circle at 90% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 20%); | |
| } | |
| .card { | |
| background: rgba(30, 41, 59, 0.7); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(99, 102, 241, 0.2); | |
| border-radius: 16px; | |
| transition: all 0.3s ease; | |
| } | |
| .card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 25px -5px rgba(99, 102, 241, 0.2), 0 10px 10px -5px rgba(99, 102, 241, 0.1); | |
| border-color: rgba(99, 102, 241, 0.4); | |
| } | |
| .parallax { | |
| background-attachment: fixed; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .ripple { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .ripple-effect { | |
| position: absolute; | |
| border-radius: 50%; | |
| background: rgba(255, 255, 255, 0.3); | |
| transform: scale(0); | |
| animation: ripple-animation 0.6s linear; | |
| } | |
| @keyframes ripple-animation { | |
| to { | |
| transform: scale(4); | |
| opacity: 0; | |
| } | |
| } | |
| .typing { | |
| overflow: hidden; | |
| border-right: 0.15em solid #6366f1; | |
| white-space: nowrap; | |
| animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite; | |
| } | |
| @keyframes typing { | |
| from { width: 0 } | |
| to { width: 100% } | |
| } | |
| @keyframes blink-caret { | |
| from, to { border-color: transparent } | |
| 50% { border-color: #6366f1 } | |
| } | |
| .path { | |
| stroke-dasharray: 1000; | |
| stroke-dashoffset: 1000; | |
| animation: dash 5s linear forwards infinite; | |
| } | |
| @keyframes dash { | |
| to { | |
| stroke-dashoffset: 0; | |
| } | |
| } | |
| @keyframes jump { | |
| 0%, 100% { | |
| transform: translateY(0); | |
| } | |
| 50% { | |
| transform: translateY(-20px); | |
| } | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| } | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| .bounce-ball { | |
| animation: bounce 2s infinite; | |
| } | |
| @keyframes bounce { | |
| 0%, 100% { | |
| transform: translateY(0); | |
| } | |
| 50% { | |
| transform: translateY(-50px); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header class="fixed w-full z-50"> | |
| <div class="h-1 bg-gradient-to-r from-primary to-secondary fixed top-0 left-0 right-0 z-50 origin-left scale-x-0" id="progressBar"></div> | |
| <nav class="container mx-auto px-6 py-4 flex justify-between items-center"> | |
| <div class="text-2xl font-bold"> | |
| <span class="gradient-text">Anim</span>Magic | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#home" class="hover:text-primary transition-colors">Home</a> | |
| <a href="#scroll" class="hover:text-primary transition-colors">Scroll</a> | |
| <a href="#css" class="hover:text-primary transition-colors">CSS</a> | |
| <a href="#svg" class="hover:text-primary transition-colors">SVG</a> | |
| <a href="#micro" class="hover:text-primary transition-colors">Micro</a> | |
| </div> | |
| <button class="md:hidden text-xl" id="mobileMenuButton"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <div class="md:hidden fixed inset-0 bg-black/50 z-40 hidden" id="mobileMenuOverlay"></div> | |
| <div class="md:hidden fixed top-0 right-0 h-full w-72 bg-gradient-to-b from-slate-800 to-slate-900 shadow-2xl z-50 transform translate-x-full transition-all duration-500 ease-in-out" id="mobileMenu"> | |
| <div class="flex justify-between items-center p-6 border-b border-slate-700"> | |
| <div class="text-2xl font-bold"> | |
| <span class="gradient-text">Anim</span>Magic | |
| </div> | |
| <button id="closeMenuButton" class="text-2xl hover:text-primary transition-colors"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <nav class="flex flex-col p-6 space-y-2"> | |
| <a href="#home" class="px-4 py-3 rounded-lg hover:bg-slate-700/50 hover:text-primary transition-all duration-300 flex items-center group"> | |
| <i class="fas fa-home mr-3 text-primary/80 group-hover:text-primary transition-colors"></i> | |
| Home | |
| </a> | |
| <a href="#scroll" class="px-4 py-3 rounded-lg hover:bg-slate-700/50 hover:text-primary transition-all duration-300 flex items-center group"> | |
| <i class="fas fa-scroll mr-3 text-primary/80 group-hover:text-primary transition-colors"></i> | |
| Scroll | |
| </a> | |
| <a href="#css" class="px-4 py-3 rounded-lg hover:bg-slate-700/50 hover:text-primary transition-all duration-300 flex items-center group"> | |
| <i class="fab fa-css3-alt mr-3 text-primary/80 group-hover:text-primary transition-colors"></i> | |
| CSS | |
| </a> | |
| <a href="#svg" class="px-4 py-3 rounded-lg hover:bg-slate-700/50 hover:text-primary transition-all duration-300 flex items-center group"> | |
| <i class="fas fa-project-diagram mr-3 text-primary/80 group-hover:text-primary transition-colors"></i> | |
| SVG | |
| </a> | |
| <a href="#micro" class="px-4 py-3 rounded-lg hover:bg-slate-700/50 hover:text-primary transition-all duration-300 flex items-center group"> | |
| <i class="fas fa-mouse-pointer mr-3 text-primary/80 group-hover:text-primary transition-colors"></i> | |
| Micro | |
| </a> | |
| </nav> | |
| <div class="absolute bottom-0 left-0 right-0 p-6 border-t border-slate-700"> | |
| <div class="flex justify-center space-x-4"> | |
| <a href="#" class="text-slate-400 hover:text-primary transition-colors text-xl"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-slate-400 hover:text-primary transition-colors text-xl"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| <a href="#" class="text-slate-400 hover:text-primary transition-colors text-xl"> | |
| <i class="fab fa-linkedin"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="home" class="min-h-screen flex items-center hero-pattern relative overflow-hidden"> | |
| <!-- Particles background --> | |
| <div class="particles" id="particles"></div> | |
| <div class="absolute inset-0 z-0"> | |
| <div class="absolute top-20 left-20 w-64 h-64 bg-primary/10 rounded-full filter blur-3xl animate-float"></div> | |
| <div class="absolute bottom-20 right-20 w-64 h-64 bg-secondary/10 rounded-full filter blur-3xl animate-float delay-2000"></div> | |
| <div class="absolute top-1/2 left-1/4 w-32 h-32 bg-primary/20 rounded-full filter blur-xl animate-pulse-slow"></div> | |
| </div> | |
| <div class="container mx-auto px-6 py-20 text-center"> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6"> | |
| <span class="gradient-text typing" id="typing-text"></span><br> | |
| <span class="typing-cursor">|</span> | |
| </h1> | |
| <p class="text-xl max-w-3xl mx-auto mb-10 text-slate-300"> | |
| Enhance user experience with beautiful animations that bring your website to life | |
| </p> | |
| <div class="flex justify-center space-x-4"> | |
| <button class="px-8 py-3 bg-primary rounded-full font-semibold ripple hover:bg-indigo-500 transition-colors"> | |
| Explore Animations | |
| </button> | |
| <button class="px-8 py-3 bg-transparent border-2 border-primary rounded-full font-semibold hover:bg-primary/20 transition-colors"> | |
| View Examples | |
| </button> | |
| </div> | |
| <div class="mt-20 flex justify-center"> | |
| <div class="relative w-64 h-64"> | |
| <div class="absolute inset-0 bg-primary/20 rounded-full animate-ping-slow"></div> | |
| <div class="absolute inset-4 bg-secondary/20 rounded-full animate-ping-slow delay-1000"></div> | |
| <div class="absolute inset-8 bg-primary/20 rounded-full animate-ping-slow delay-2000"></div> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="w-32 h-32 bg-gradient-to-br from-primary to-secondary rounded-full flex items-center justify-center animate-float"> | |
| <i class="fas fa-play text-white text-3xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Advanced Hover Effects --> | |
| <section class="py-20"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl font-bold text-center mb-4">Advanced Hover Effects</h2> | |
| <p class="text-center text-slate-300 max-w-2xl mx-auto mb-16"> | |
| Interactive elements that respond to user hover | |
| </p> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Card 1 --> | |
| <div class="group relative overflow-hidden rounded-xl h-64 bg-slate-800"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-primary/20 to-secondary/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div> | |
| <div class="relative z-10 p-8 h-full flex flex-col justify-center transform group-hover:scale-105 transition-transform duration-500"> | |
| <div class="text-5xl text-primary mb-6 group-hover:text-white transition-colors duration-300"> | |
| <i class="fas fa-layer-group"></i> | |
| </div> | |
| <h3 class="text-2xl font-semibold mb-4 group-hover:text-white transition-colors duration-300">3D Card</h3> | |
| <p class="text-slate-300 group-hover:text-slate-100 transition-colors duration-300"> | |
| Card transforms on hover with depth effect | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Card 2 --> | |
| <div class="group relative overflow-hidden rounded-xl h-64 bg-slate-800"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-primary/20 to-secondary/20 transform scale-0 group-hover:scale-100 transition-transform duration-500"></div> | |
| <div class="relative z-10 p-8 h-full flex flex-col justify-center"> | |
| <div class="text-5xl text-primary mb-6 group-hover:animate-spin-slow transition-all duration-300"> | |
| <i class="fas fa-sync-alt"></i> | |
| </div> | |
| <h3 class="text-2xl font-semibold mb-4 group-hover:text-primary transition-colors duration-300">Spin Icon</h3> | |
| <p class="text-slate-300 group-hover:text-slate-100 transition-colors duration-300"> | |
| Icon spins on hover with smooth transition | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Card 3 --> | |
| <div class="group relative overflow-hidden rounded-xl h-64 bg-slate-800"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-primary/20 to-secondary/20 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-700"></div> | |
| <div class="relative z-10 p-8 h-full flex flex-col justify-center"> | |
| <div class="text-5xl text-primary mb-6 group-hover:animate-bounce-slow transition-all duration-300"> | |
| <i class="fas fa-arrow-down"></i> | |
| </div> | |
| <h3 class="text-2xl font-semibold mb-4 group-hover:text-white transition-colors duration-300">Slide Reveal</h3> | |
| <p class="text-slate-300 group-hover:text-slate-100 transition-colors duration-300"> | |
| Background slides in on hover | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Text Animations --> | |
| <section class="py-20 bg-slate-900/50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl font-bold text-center mb-4">Text Animations</h2> | |
| <p class="text-center text-slate-300 max-w-2xl mx-auto mb-16"> | |
| Creative ways to animate text content | |
| </p> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Gradient Text --> | |
| <div class="card p-8 text-center"> | |
| <h3 class="text-2xl font-semibold mb-6">Gradient Text</h3> | |
| <div class="text-4xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent"> | |
| Colorful Text | |
| </div> | |
| </div> | |
| <!-- Typing Effect --> | |
| <div class="card p-8 text-center"> | |
| <h3 class="text-2xl font-semibold mb-6">Typing Effect</h3> | |
| <div class="text-3xl font-mono overflow-hidden whitespace-nowrap border-r-4 border-primary w-0 mx-auto animate-typing"> | |
| Hello World! | |
| </div> | |
| </div> | |
| <!-- Floating Text --> | |
| <div class="card p-8 text-center"> | |
| <h3 class="text-2xl font-semibold mb-6">Floating Text</h3> | |
| <div class="text-4xl font-bold animate-float"> | |
| Float | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Scroll Animations --> | |
| <section id="scroll" class="py-20"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl font-bold text-center mb-4">Scroll Animations</h2> | |
| <p class="text-center text-slate-300 max-w-2xl mx-auto mb-16"> | |
| Elements that animate as you scroll down the page | |
| </p> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Card 1 --> | |
| <div class="card p-8 transform transition-all duration-500 opacity-0 translate-y-10" data-scroll data-delay="100"> | |
| <div class="text-5xl text-primary mb-6"> | |
| <i class="fas fa-fade"></i> | |
| </div> | |
| <h3 class="text-2xl font-semibold mb-4">Fade In</h3> | |
| <p class="text-slate-300 mb-4"> | |
| Elements gracefully appear as you scroll down the page | |
| </p> | |
| <div class="mt-4 h-2 bg-gradient-to-r from-primary to-secondary rounded-full"></div> | |
| </div> | |
| <!-- Card 2 --> | |
| <div class="card p-8 transform transition-all duration-500 opacity-0 translate-y-10" data-scroll> | |
| <div class="text-5xl text-primary mb-6"> | |
| <i class="fas fa-slide"></i> | |
| </div> | |
| <h3 class="text-2xl font-semibold mb-4">Slide In</h3> | |
| <p class="text-slate-300 mb-4"> | |
| Content slides in from different directions | |
| </p> | |
| <div class="mt-4 flex space-x-2"> | |
| <div class="h-2 w-8 bg-primary rounded-full animate-bounce-slow"></div> | |
| <div class="h-2 w-8 bg-secondary rounded-full animate-bounce-slow delay-150"></div> | |
| <div class="h-2 w-8 bg-primary rounded-full animate-bounce-slow delay-300"></div> | |
| </div> | |
| </div> | |
| <!-- Card 3 --> | |
| <div class="card p-8 transform transition-all duration-500 opacity-0 translate-y-10" data-scroll> | |
| <div class="text-5xl text-primary mb-6"> | |
| <i class="fas fa-expand"></i> | |
| </div> | |
| <h3 class="text-2xl font-semibold mb-4">Scale Up</h3> | |
| <p class="text-slate-300 mb-4"> | |
| Elements grow to their natural size | |
| </p> | |
| <div class="mt-4 flex justify-center"> | |
| <div class="w-12 h-12 bg-gradient-to-br from-primary to-secondary rounded-full animate-pulse-slow"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Parallax Section --> | |
| <section class="py-32 parallax" style="background-image: url('https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-4.0.3&auto=format&fit=crop&w=1950&q=80');"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-4xl font-bold mb-6">Parallax Scrolling</h2> | |
| <p class="text-xl max-w-2xl mx-auto mb-10 text-slate-200"> | |
| Background moves at a different speed than foreground content, creating depth illusion | |
| </p> | |
| <div class="inline-block px-8 py-4 bg-primary/80 backdrop-blur-sm rounded-full font-semibold"> | |
| Experience the Depth | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CSS Animations --> | |
| <section id="css" class="py-20 relative"> | |
| <div class="absolute -bottom-20 left-0 right-0 h-20 bg-gradient-to-t from-slate-900 to-transparent z-10"></div> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl font-bold text-center mb-4">CSS Animations</h2> | |
| <p class="text-center text-slate-300 max-w-2xl mx-auto mb-16"> | |
| Smooth transitions and animations using pure CSS | |
| </p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> | |
| <div class="flex flex-col justify-center"> | |
| <h3 class="text-3xl font-semibold mb-6">Hover Effects</h3> | |
| <p class="text-slate-300 mb-6"> | |
| Enhance interactivity with subtle hover animations that provide visual feedback to users. | |
| </p> | |
| <div class="flex space-x-6"> | |
| <div class="group"> | |
| <div class="w-20 h-20 bg-primary rounded-xl flex items-center justify-center group-hover:rotate-12 transition-transform duration-300"> | |
| <i class="fas fa-star text-2xl text-white"></i> | |
| </div> | |
| </div> | |
| <div class="group"> | |
| <div class="w-20 h-20 bg-secondary rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300"> | |
| <i class="fas fa-heart text-2xl text-white"></i> | |
| </div> | |
| </div> | |
| <div class="group"> | |
| <div class="w-20 h-20 bg-gradient-to-br from-primary to-secondary rounded-xl flex items-center justify-center group-hover:skew-y-3 transition-transform duration-300"> | |
| <i class="fas fa-bolt text-2xl text-white"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="card p-8 h-full"> | |
| <h3 class="text-2xl font-semibold mb-6">Animated Cards</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center p-4 bg-slate-800 rounded-lg hover:bg-slate-700 transition-colors"> | |
| <div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-cube"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">3D Transform</h4> | |
| <p class="text-sm text-slate-300">Rotate elements in 3D space</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-4 bg-slate-800 rounded-lg hover:bg-slate-700 transition-colors"> | |
| <div class="w-12 h-12 bg-secondary rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-move"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Smooth Transitions</h4> | |
| <p class="text-sm text-slate-300">Animate property changes</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-4 bg-slate-800 rounded-lg hover:bg-slate-700 transition-colors"> | |
| <div class="w-12 h-12 bg-gradient-to-br from-primary to-secondary rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-infinity"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Keyframe Animations</h4> | |
| <p class="text-sm text-slate-300">Create complex animation sequences</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SVG Animation --> | |
| <section id="svg" class="py-20 bg-slate-900/50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl font-bold text-center mb-4">SVG Animations</h2> | |
| <p class="text-center text-slate-300 max-w-2xl mx-auto mb-16"> | |
| Scalable vector graphics with smooth animations | |
| </p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <svg viewBox="0 0 200 200" class="w-full max-w-md mx-auto hover:scale-105 transition-transform duration-300 cursor-pointer"> | |
| <circle cx="100" cy="100" r="80" fill="none" stroke="#6366f1" stroke-width="4" stroke-dasharray="1000" stroke-dashoffset="1000"> | |
| <animate attributeName="stroke-dashoffset" from="1000" to="0" dur="2s" fill="freeze" repeatCount="indefinite" /> | |
| </circle> | |
| <path d="M50,100 Q100,20 150,100 T250,100" fill="none" stroke="#8b5cf6" stroke-width="3" stroke-dasharray="1000" stroke-dashoffset="1000" class="path"> | |
| <animate attributeName="stroke-dashoffset" from="1000" to="0" dur="3s" fill="freeze" repeatCount="indefinite" /> | |
| </path> | |
| <circle cx="100" cy="100" r="30" fill="#6366f1" opacity="0.7"> | |
| <animate attributeName="r" from="30" to="50" dur="2s" repeatCount="indefinite" /> | |
| <animate attributeName="opacity" from="0.7" to="0.3" dur="2s" repeatCount="indefinite" /> | |
| </circle> | |
| </svg> | |
| </div> | |
| <div> | |
| <h3 class="text-3xl font-semibold mb-6">Dynamic SVG Elements</h3> | |
| <p class="text-slate-300 mb-6"> | |
| SVG animations provide resolution-independent graphics that look crisp on any device. They're perfect for logos, icons, and illustrations. | |
| </p> | |
| <ul class="space-y-3"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-primary mr-3"></i> | |
| <span>Path drawing animations</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-primary mr-3"></i> | |
| <span>Morphing between shapes</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-primary mr-3"></i> | |
| <span>Transform animations</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-primary mr-3"></i> | |
| <span>Stroke and fill animations</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Micro-interactions --> | |
| <section id="micro" class="py-20"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl font-bold text-center mb-4">Micro-interactions</h2> | |
| <p class="text-center text-slate-300 max-w-2xl mx-auto mb-16"> | |
| Small animations that respond to user actions | |
| </p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> | |
| <div class="card p-8"> | |
| <h3 class="text-2xl font-semibold mb-6">Like Button</h3> | |
| <div class="flex justify-center"> | |
| <button id="likeButton" class="w-16 h-16 rounded-full bg-slate-800 flex items-center justify-center group relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-red-500 opacity-0 scale-0 group-hover:opacity-10 group-hover:scale-100 transition-all duration-300 rounded-full"></div> | |
| <i class="fas fa-heart text-3xl text-slate-400 group-hover:text-red-500 transition-colors"></i> | |
| </button> | |
| </div> | |
| <p class="text-center mt-6 text-slate-300">Click the heart to see the animation</p> | |
| </div> | |
| <div class="card p-8"> | |
| <h3 class="text-2xl font-semibold mb-6">Ripple Effect</h3> | |
| <div class="flex justify-center"> | |
| <button id="rippleButton" class="px-8 py-4 bg-primary rounded-full font-semibold ripple"> | |
| Click Me | |
| </button> | |
| </div> | |
| <p class="text-center mt-6 text-slate-300">Creates a water ripple effect on click</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Loading Animation --> | |
| <section class="py-20 bg-slate-900/50"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-4xl font-bold mb-6">Loading Animations</h2> | |
| <p class="text-xl max-w-2xl mx-auto mb-16 text-slate-300"> | |
| Engaging animations displayed during loading processes | |
| </p> | |
| <div class="flex flex-wrap justify-center gap-8"> | |
| <div class="w-32 h-32 rounded-full border-4 border-t-primary border-r-secondary border-b-secondary border-l-primary animate-spin-slow"></div> | |
| <div class="flex items-center justify-center space-x-3"> | |
| <div class="w-6 h-6 bg-primary rounded-full animate-bounce-slow"></div> | |
| <div class="w-6 h-6 bg-secondary rounded-full animate-bounce-slow delay-150"></div> | |
| <div class="w-6 h-6 bg-primary rounded-full animate-bounce-slow delay-300"></div> | |
| </div> | |
| <div class="relative w-32 h-32"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="w-16 h-16 bg-gradient-to-br from-primary to-secondary rounded-full animate-pulse-slow"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Advanced Animations --> | |
| <section class="py-20 bg-gradient-to-b from-slate-900 to-slate-800"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl font-bold text-center mb-4">3D Transformations</h2> | |
| <p class="text-center text-slate-300 max-w-2xl mx-auto mb-16"> | |
| Adding depth and perspective to your elements | |
| </p> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="card p-8 text-center transform transition-all duration-500 hover:rotate-y-180"> | |
| <div class="text-5xl text-primary mb-6"> | |
| <i class="fas fa-cube"></i> | |
| </div> | |
| <h3 class="text-2xl font-semibold mb-4">Rotate</h3> | |
| <p class="text-slate-300">3D rotation effects</p> | |
| </div> | |
| <div class="card p-8 text-center transform transition-all duration-500 hover:perspective-1000 hover:translate-z-50"> | |
| <div class="text-5xl text-primary mb-6"> | |
| <i class="fas fa-arrows-alt"></i> | |
| </div> | |
| <h3 class="text-2xl font-semibold mb-4">Perspective</h3> | |
| <p class="text-slate-300">Depth perception</p> | |
| </div> | |
| <div class="card p-8 text-center transform transition-all duration-500 hover:skew-y-12 hover:scale-110"> | |
| <div class="text-5xl text-primary mb-6"> | |
| <i class="fas fa-vector-square"></i> | |
| </div> | |
| <h3 class="text-2xl font-semibold mb-4">Skew</h3> | |
| <p class="text-slate-300">Distortion effects</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Advanced Animations --> | |
| <section class="py-20 bg-gradient-to-b from-slate-900 to-slate-800"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl font-bold text-center mb-4">Advanced Animations</h2> | |
| <p class="text-center text-slate-300 max-w-2xl mx-auto mb-16"> | |
| More complex animation effects for special moments | |
| </p> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="card p-8 text-center group"> | |
| <div class="w-24 h-24 mx-auto mb-6 bg-primary rounded-full flex items-center justify-center animate-shake group-hover:animate-swing"> | |
| <i class="fas fa-bell text-3xl text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Shake & Swing</h3> | |
| <p class="text-slate-300">Perfect for notification alerts</p> | |
| </div> | |
| <div class="card p-8 text-center group"> | |
| <div class="w-24 h-24 mx-auto mb-6 bg-secondary rounded-full flex items-center justify-center animate-flash group-hover:animate-jump"> | |
| <i class="fas fa-bolt text-3xl text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Flash & Jump</h3> | |
| <p class="text-slate-300">Great for important actions</p> | |
| </div> | |
| <div class="card p-8 text-center group"> | |
| <div class="w-24 h-24 mx-auto mb-6 bg-gradient-to-br from-primary to-secondary rounded-full flex items-center justify-center animate-float group-hover:animate-spin-slow"> | |
| <i class="fas fa-cog text-3xl text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Float & Spin</h3> | |
| <p class="text-slate-300">Ideal for loading indicators</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Canvas Animation --> | |
| <section class="py-20"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl font-bold text-center mb-4">Canvas Animations</h2> | |
| <p class="text-center text-slate-300 max-w-2xl mx-auto mb-16"> | |
| Dynamic animations using HTML5 Canvas | |
| </p> | |
| <div class="card p-6"> | |
| <canvas id="animationCanvas" class="w-full h-96 rounded-xl"></canvas> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Background Animations --> | |
| </section> | |
| <!-- Motion Graphics --> | |
| <section class="py-20"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl font-bold text-center mb-4">Motion Graphics</h2> | |
| <p class="text-center text-slate-300 max-w-2xl mx-auto mb-16"> | |
| Complex animations combining multiple effects | |
| </p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <div class="relative h-64 w-full bg-slate-800 rounded-xl overflow-hidden"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="w-32 h-32 bg-gradient-to-br from-primary to-secondary rounded-full animate-spin-slow"></div> | |
| </div> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="w-16 h-16 bg-white rounded-full animate-bounce-slow"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-3xl font-semibold mb-6">Combined Effects</h3> | |
| <p class="text-slate-300 mb-6"> | |
| Create stunning visual effects by combining multiple animations together. | |
| </p> | |
| <ul class="space-y-3"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-primary mr-3 animate-pulse-slow"></i> | |
| <span>Spin + Bounce effects</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-primary mr-3 animate-float"></i> | |
| <span>Float + Pulse effects</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-primary mr-3 animate-wave"></i> | |
| <span>Wave + Scale effects</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Background Animations --> | |
| <section class="py-20 relative overflow-hidden"> | |
| <div class="absolute inset-0 z-0"> | |
| <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-primary/10 to-secondary/10 animate-pulse-slow"></div> | |
| <div class="absolute top-1/4 left-1/4 w-64 h-64 bg-primary/20 rounded-full filter blur-3xl animate-float"></div> | |
| <div class="absolute bottom-1/4 right-1/4 w-64 h-64 bg-secondary/20 rounded-full filter blur-3xl animate-float delay-2000"></div> | |
| </div> | |
| <div class="container mx-auto px-6 relative z-10"> | |
| <h2 class="text-4xl font-bold text-center mb-4">Background Animations</h2> | |
| <p class="text-center text-slate-300 max-w-2xl mx-auto mb-16"> | |
| Subtle animations that enhance the overall design | |
| </p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div class="card p-8"> | |
| <h3 class="text-2xl font-semibold mb-6">Gradient Pulse</h3> | |
| <div class="w-full h-48 rounded-xl bg-gradient-to-br from-primary/30 to-secondary/30 animate-pulse-slow"></div> | |
| </div> | |
| <div class="card p-8"> | |
| <h3 class="text-2xl font-semibold mb-6">Floating Elements</h3> | |
| <div class="relative w-full h-48 rounded-xl overflow-hidden"> | |
| <div class="absolute top-8 left-8 w-16 h-16 bg-primary/50 rounded-full animate-float"></div> | |
| <div class="absolute bottom-8 right-8 w-16 h-16 bg-secondary/50 rounded-full animate-float delay-1000"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Page Transitions --> | |
| <section class="py-20 bg-slate-900/50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl font-bold text-center mb-4">Page Transitions</h2> | |
| <p class="text-center text-slate-300 max-w-2xl mx-auto mb-16"> | |
| Smooth transitions between pages and sections | |
| </p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> | |
| <div> | |
| <h3 class="text-3xl font-semibold mb-6">Fade Transitions</h3> | |
| <p class="text-slate-300 mb-6"> | |
| Elements fade in and out smoothly when navigating between pages. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <button class="px-6 py-3 bg-primary rounded-lg font-medium transition-all duration-300 hover:opacity-80"> | |
| Fade In | |
| </button> | |
| <button class="px-6 py-3 bg-secondary rounded-lg font-medium transition-all duration-300 hover:opacity-80"> | |
| Fade Out | |
| </button> | |
| </div> | |
| </div> | |
| <div class="card p-8"> | |
| <h3 class="text-2xl font-semibold mb-6">Slide Transitions</h3> | |
| <div class="space-y-4"> | |
| <button class="w-full px-6 py-3 bg-slate-800 rounded-lg font-medium transition-all duration-300 transform hover:translate-x-4"> | |
| Slide Right | |
| </button> | |
| <button class="w-full px-6 py-3 bg-slate-800 rounded-lg font-medium transition-all duration-300 transform hover:-translate-x-4"> | |
| Slide Left | |
| </button> | |
| <button class="w-full px-6 py-3 bg-slate-800 rounded-lg font-medium transition-all duration-300 transform hover:-translate-y-2"> | |
| Slide Up | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-12 border-t border-slate-800 bg-gradient-to-b from-slate-900/50 to-slate-900 relative"> | |
| <div class="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-primary/50 to-transparent"></div> | |
| <div class="container mx-auto px-6 text-center"> | |
| <div class="text-3xl font-bold mb-6"> | |
| <span class="gradient-text">Anim</span>Magic | |
| </div> | |
| <p class="text-slate-400 max-w-2xl mx-auto mb-8"> | |
| Creating beautiful web experiences with smooth animations and interactions | |
| </p> | |
| <div class="flex justify-center space-x-6 mb-8"> | |
| <a href="#" class="text-slate-400 hover:text-primary transition-colors group"> | |
| <i class="fab fa-twitter text-xl group-hover:animate-bounce-slow"></i> | |
| </a> | |
| <a href="#" class="text-slate-400 hover:text-primary transition-colors group"> | |
| <i class="fab fa-github text-xl group-hover:animate-float"></i> | |
| </a> | |
| <a href="#" class="text-slate-400 hover:text-primary transition-colors group"> | |
| <i class="fab fa-linkedin text-xl group-hover:animate-pulse-slow"></i> | |
| </a> | |
| <a href="#" class="text-slate-400 hover:text-primary transition-colors group"> | |
| <i class="fab fa-codepen text-xl group-hover:animate-spin-slow"></i> | |
| </a> | |
| </div> | |
| <p class="text-slate-500 text-sm"> | |
| © 2023 AnimMagic. All rights reserved. | |
| </p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu functionality | |
| const mobileMenuButton = document.getElementById('mobileMenuButton'); | |
| const closeMenuButton = document.getElementById('closeMenuButton'); | |
| const mobileMenu = document.getElementById('mobileMenu'); | |
| const mobileMenuOverlay = document.getElementById('mobileMenuOverlay'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.remove('translate-x-full'); | |
| mobileMenuOverlay.classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| }); | |
| closeMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.add('translate-x-full'); | |
| mobileMenuOverlay.classList.add('hidden'); | |
| document.body.style.overflow = ''; | |
| }); | |
| mobileMenuOverlay.addEventListener('click', () => { | |
| mobileMenu.classList.add('translate-x-full'); | |
| mobileMenuOverlay.classList.add('hidden'); | |
| document.body.style.overflow = ''; | |
| }); | |
| // Close menu when clicking on nav links | |
| document.querySelectorAll('#mobileMenu a').forEach(link => { | |
| link.addEventListener('click', () => { | |
| mobileMenu.classList.add('translate-x-full'); | |
| mobileMenuOverlay.classList.add('hidden'); | |
| document.body.style.overflow = ''; | |
| }); | |
| }); | |
| // Enhanced animations | |
| // Typing animation | |
| const typingText = document.getElementById('typing-text'); | |
| const texts = ["Smooth Animations", "Interactive Elements", "Engaging UX", "Modern Web"]; | |
| let textIndex = 0; | |
| let charIndex = 0; | |
| let isDeleting = false; | |
| function type() { | |
| const currentText = texts[textIndex]; | |
| if (isDeleting) { | |
| typingText.textContent = currentText.substring(0, charIndex - 1); | |
| charIndex--; | |
| } else { | |
| typingText.textContent = currentText.substring(0, charIndex + 1); | |
| charIndex++; | |
| } | |
| if (!isDeleting && charIndex === currentText.length) { | |
| setTimeout(() => isDeleting = true, 1000); | |
| } else if (isDeleting && charIndex === 0) { | |
| isDeleting = false; | |
| textIndex = (textIndex + 1) % texts.length; | |
| } | |
| setTimeout(type, isDeleting ? 50 : 100); | |
| } | |
| // Start typing animation | |
| setTimeout(type, 1000); | |
| // Particles animation | |
| function createParticles() { | |
| const particlesContainer = document.getElementById('particles'); | |
| const particleCount = Math.floor(window.innerWidth / 10); | |
| for (let i = 0; i < particleCount; i++) { | |
| const particle = document.createElement('div'); | |
| particle.classList.add('particle'); | |
| const size = Math.random() * 5 + 1; | |
| const posX = Math.random() * window.innerWidth; | |
| const delay = Math.random() * 10; | |
| const duration = Math.random() * 20 + 10; | |
| particle.style.width = `${size}px`; | |
| particle.style.height = `${size}px`; | |
| particle.style.left = `${posX}px`; | |
| particle.style.animation = `float-up ${duration}s linear ${delay}s infinite`; | |
| particle.style.opacity = Math.random() * 0.5 + 0.1; | |
| particlesContainer.appendChild(particle); | |
| } | |
| } | |
| createParticles(); | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Header scroll effect | |
| const header = document.querySelector('header'); | |
| window.addEventListener('scroll', () => { | |
| if (window.scrollY > 50) { | |
| header.classList.add('scrolled'); | |
| } else { | |
| header.classList.remove('scrolled'); | |
| } | |
| }); | |
| // Initialize GSAP for smoother animations | |
| const gsap = window.gsap; | |
| if (gsap) { | |
| gsap.from(".hero-content", { | |
| duration: 1.5, | |
| y: 50, | |
| opacity: 0, | |
| ease: "power3.out" | |
| }); | |
| } | |
| // Scroll animation for cards | |
| const scrollElements = document.querySelectorAll('[data-scroll]'); | |
| const elementInView = (el) => { | |
| const elementTop = el.getBoundingClientRect().top; | |
| return ( | |
| elementTop <= (window.innerHeight || document.documentElement.clientHeight) * 0.75 | |
| ); | |
| }; | |
| const displayScrollElement = (element) => { | |
| element.classList.add('opacity-100', 'translate-y-0'); | |
| }; | |
| const handleScrollAnimation = () => { | |
| scrollElements.forEach((el) => { | |
| if (elementInView(el)) { | |
| displayScrollElement(el); | |
| } | |
| }); | |
| }; | |
| window.addEventListener('scroll', () => { | |
| handleScrollAnimation(); | |
| }); | |
| // Initialize by checking elements on load | |
| handleScrollAnimation(); | |
| // Like button animation | |
| const likeButton = document.getElementById('likeButton'); | |
| likeButton.addEventListener('click', function() { | |
| this.classList.toggle('text-red-500'); | |
| // Create animation element | |
| const heart = document.createElement('div'); | |
| heart.innerHTML = '<i class="fas fa-heart text-red-500"></i>'; | |
| heart.classList.add('absolute', 'text-2xl', 'animate-like'); | |
| // Position it | |
| const rect = this.getBoundingClientRect(); | |
| heart.style.left = `${rect.left + rect.width/2}px`; | |
| heart.style.top = `${rect.top + rect.height/2}px`; | |
| document.body.appendChild(heart); | |
| // Remove after animation | |
| setTimeout(() => { | |
| heart.remove(); | |
| }, 1000); | |
| }); | |
| // Ripple effect | |
| const rippleButton = document.getElementById('rippleButton'); | |
| rippleButton.addEventListener('click', function(e) { | |
| // Remove any existing ripples | |
| const existingRipples = document.querySelectorAll('.ripple-effect'); | |
| existingRipples.forEach(ripple => ripple.remove()); | |
| // Create ripple | |
| const ripple = document.createElement('span'); | |
| ripple.classList.add('ripple-effect'); | |
| // Position ripple | |
| const rect = this.getBoundingClientRect(); | |
| const size = Math.max(rect.width, rect.height); | |
| ripple.style.width = ripple.style.height = `${size}px`; | |
| ripple.style.left = `${e.clientX - rect.left - size/2}px`; | |
| ripple.style.top = `${e.clientY - rect.top - size/2}px`; | |
| this.appendChild(ripple); | |
| // Remove ripple after animation | |
| setTimeout(() => { | |
| ripple.remove(); | |
| }, 600); | |
| }); | |
| // Scroll progress bar | |
| const progressBar = document.getElementById('progressBar'); | |
| window.addEventListener('scroll', () => { | |
| const scrollTop = document.documentElement.scrollTop; | |
| const scrollHeight = document.documentElement.scrollHeight; | |
| const clientHeight = document.documentElement.clientHeight; | |
| const scrollPercent = (scrollTop / (scrollHeight - clientHeight)) * 100; | |
| progressBar.style.transform = `scaleX(${scrollPercent / 100})`; | |
| }); | |
| // Canvas animation | |
| const canvas = document.getElementById('animationCanvas'); | |
| const ctx = canvas.getContext('2d'); | |
| // Set canvas size | |
| canvas.width = canvas.offsetWidth; | |
| canvas.height = canvas.offsetHeight; | |
| // Ball properties | |
| const balls = []; | |
| const ballCount = 30; | |
| class Ball { | |
| constructor() { | |
| this.radius = Math.random() * 20 + 10; | |
| this.x = Math.random() * (canvas.width - this.radius * 2) + this.radius; | |
| this.y = Math.random() * (canvas.height - this.radius * 2) + this.radius; | |
| this.dx = (Math.random() - 0.5) * 4; | |
| this.dy = (Math.random() - 0.5) * 4; | |
| this.color = `hsl(${Math.random() * 360}, 70%, 60%)`; | |
| } | |
| draw() { | |
| ctx.beginPath(); | |
| ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); | |
| ctx.fillStyle = this.color; | |
| ctx.fill(); | |
| ctx.closePath(); | |
| } | |
| update() { | |
| if (this.x + this.radius > canvas.width || this.x - this.radius < 0) { | |
| this.dx = -this.dx; | |
| } | |
| if (this.y + this.radius > canvas.height || this.y - this.radius < 0) { | |
| this.dy = -this.dy; | |
| } | |
| this.x += this.dx; | |
| this.y += this.dy; | |
| this.draw(); | |
| } | |
| } | |
| // Create balls | |
| for (let i = 0; i < ballCount; i++) { | |
| balls.push(new Ball()); | |
| } | |
| // Animation loop | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| balls.forEach(ball => { | |
| ball.update(); | |
| }); | |
| } | |
| animate(); | |
| // Resize canvas on window resize | |
| window.addEventListener('resize', () => { | |
| canvas.width = canvas.offsetWidth; | |
| canvas.height = canvas.offsetHeight; | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Setsunapux/animaflow" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |