Spaces:

VoidVision
/

pixelpulse-gallery

Running

App Files Files Community

VoidVision commited on 29 days ago

Commit

d1abf67

verified ·

1 Parent(s): 67ebb22

add best effects and animations to the website

Browse files

Files changed (4) hide show

components/particles.js +98 -0
index.html +19 -11
script.js +81 -6
style.css +84 -9

components/particles.js ADDED Viewed

	@@ -0,0 +1,98 @@

+class ParticleBackground extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          z-index: 0;
+          pointer-events: none;
+          overflow: hidden;
+        }
+        canvas {
+          position: absolute;
+          top: 0;
+          left: 0;
+        }
+      </style>
+      <canvas id="particles-canvas"></canvas>
+    `;
+    const canvas = this.shadowRoot.getElementById('particles-canvas');
+    const ctx = canvas.getContext('2d');
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    // Particle system
+    const particles = [];
+    const particleCount = Math.floor(window.innerWidth * window.innerHeight / 10000);
+    const colors = ['rgba(14, 165, 233, 0.6)', 'rgba(124, 58, 237, 0.6)', 'rgba(255, 255, 255, 0.8)'];
+    // Create particles
+    for (let i = 0; i < particleCount; i++) {
+      particles.push({
+        x: Math.random() * canvas.width,
+        y: Math.random() * canvas.height,
+        size: Math.random() * 3 + 1,
+        speedX: Math.random() * 1 - 0.5,
+        speedY: Math.random() * 1 - 0.5,
+        color: colors[Math.floor(Math.random() * colors.length)]
+      });
+    }
+    // Animation loop
+    const animate = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      // Update and draw particles
+      for (let i = 0; i < particles.length; i++) {
+        const p = particles[i];
+        // Update position
+        p.x += p.speedX;
+        p.y += p.speedY;
+        // Bounce off edges
+        if (p.x < 0 || p.x > canvas.width) p.speedX *= -1;
+        if (p.y < 0 || p.y > canvas.height) p.speedY *= -1;
+        // Draw particle
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
+        ctx.fillStyle = p.color;
+        ctx.fill();
+        // Draw connections
+        for (let j = i + 1; j < particles.length; j++) {
+          const p2 = particles[j];
+          const distance = Math.sqrt(Math.pow(p.x - p2.x, 2) + Math.pow(p.y - p2.y, 2));
+          if (distance < 100) {
+            ctx.beginPath();
+            ctx.strokeStyle = `rgba(200, 200, 255, ${1 - distance/100})`;
+            ctx.lineWidth = 0.5;
+            ctx.moveTo(p.x, p.y);
+            ctx.lineTo(p2.x, p2.y);
+            ctx.stroke();
+          }
+        }
+      }
+      requestAnimationFrame(animate);
+    };
+    // Handle resize
+    window.addEventListener('resize', () => {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+    });
+    animate();
+  }
+}
+customElements.define('particle-background', ParticleBackground);

index.html CHANGED Viewed

@@ -44,16 +44,22 @@
     </script>
 </head>
 <body class="bg-gray-50 text-gray-900 font-sans antialiased">
     <custom-navbar></custom-navbar>
-    <main>
         <!-- Hero Section -->
-        <section class="relative h-screen flex items-center justify-center overflow-hidden">
-            <div class="absolute inset-0 bg-gradient-to-br from-primary-500 to-secondary-600 opacity-90"></div>
             <div class="absolute inset-0 bg-[url('https://static.photos/abstract/1200x630/42')] bg-cover bg-center mix-blend-overlay"></div>
             <div class="relative z-10 text-center px-4 max-w-4xl mx-auto">
-                <h1 class="text-5xl md:text-7xl font-bold text-white mb-6 animate-fadeIn">PixelPulse Gallery</h1>
-                <p class="text-xl md:text-2xl text-white/90 mb-8 max-w-2xl mx-auto animate-fadeIn delay-100">Where digital brushstrokes meet infinite imagination</p>
-                <a href="#gallery" class="inline-flex items-center px-8 py-3 bg-white text-primary-600 rounded-full font-semibold shadow-lg hover:bg-gray-100 transition-all duration-300 animate-bounce">
                     Explore Artworks
                     <i data-feather="arrow-down" class="ml-2"></i>
                 </a>
@@ -73,9 +79,9 @@
                 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                     <!-- Artwork 1 -->
-                    <div class="group relative overflow-hidden rounded-xl shadow-xl hover:shadow-2xl transition-all duration-500">
-                        <img src="https://static.photos/abstract/640x360/1" alt="Digital Artwork" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110">
-                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
                             <div>
                                 <h3 class="text-xl font-bold text-white">Cosmic Dreams</h3>
                                 <p class="text-white/80">Digital Painting | 2023</p>
@@ -303,11 +309,13 @@
     </main>
     <custom-footer></custom-footer>
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
     <script src="script.js"></script>
-    <script>
         feather.replace();
     </script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>

     </script>
 </head>
 <body class="bg-gray-50 text-gray-900 font-sans antialiased">
+    <particle-background></particle-background>
     <custom-navbar></custom-navbar>
+<main>
         <!-- Hero Section -->
+        <section class="hero-section relative h-screen flex items-center justify-center overflow-hidden">
+            <div class="absolute inset-0 bg-gradient-to-br from-primary-500 to-secondary-600 opacity-90 animate-gradientBG"></div>
             <div class="absolute inset-0 bg-[url('https://static.photos/abstract/1200x630/42')] bg-cover bg-center mix-blend-overlay"></div>
+            <div class="absolute inset-0 bg-[url('https://static.photos/abstract/1200x630/43')] bg-cover bg-center mix-blend-overlay opacity-0 hover:opacity-100 transition-opacity duration-1000"></div>
             <div class="relative z-10 text-center px-4 max-w-4xl mx-auto">
+                <h1 class="text-5xl md:text-7xl font-bold text-white mb-6 text-reveal" data-animate="fadeIn">
+                    PixelPulse Gallery
+                </h1>
+                <p class="text-xl md:text-2xl text-white/90 mb-8 max-w-2xl mx-auto" data-animate="fadeIn" data-delay="100">
+                    Where digital brushstrokes meet infinite imagination
+                </p>
+<a href="#gallery" class="inline-flex items-center px-8 py-3 bg-white text-primary-600 rounded-full font-semibold shadow-lg hover:bg-gray-100 transition-all duration-300 animate-bounce">
                     Explore Artworks
                     <i data-feather="arrow-down" class="ml-2"></i>
                 </a>
                 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                     <!-- Artwork 1 -->
+                    <div class="artwork-card group relative overflow-hidden rounded-xl shadow-xl hover:shadow-2xl transition-all duration-500 transform-style-preserve-3d">
+                        <img src="https://static.photos/abstract/640x360/1" alt="Digital Artwork" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110" data-animate="fadeIn">
+<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
                             <div>
                                 <h3 class="text-xl font-bold text-white">Cosmic Dreams</h3>
                                 <p class="text-white/80">Digital Painting | 2023</p>
     </main>
     <custom-footer></custom-footer>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
+    <script src="components/particles.js"></script>
     <script src="script.js"></script>
+<script>
         feather.replace();
     </script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>

script.js CHANGED Viewed

@@ -36,20 +36,30 @@ document.addEventListener('DOMContentLoaded', function() {
             this.reset();
         });
     }
-    // Intersection Observer for animations
     const animateOnScroll = () => {
-        const elements = document.querySelectorAll('.scroll-animate');
         const observer = new IntersectionObserver((entries) => {
             entries.forEach(entry => {
                 if (entry.isIntersecting) {
-                    entry.target.classList.add('animate-fadeIn');
-                    observer.unobserve(entry.target);
                 }
             });
         }, {
-            threshold: 0.1
         });
         elements.forEach(element => {
@@ -57,5 +67,70 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     };
     animateOnScroll();
 });

             this.reset();
         });
     }
+    // Enhanced Intersection Observer for animations
     const animateOnScroll = () => {
+        const elements = document.querySelectorAll('[data-animate]');
         const observer = new IntersectionObserver((entries) => {
             entries.forEach(entry => {
                 if (entry.isIntersecting) {
+                    const animationType = entry.target.getAttribute('data-animate');
+                    const delay = entry.target.getAttribute('data-delay') || '0';
+                    entry.target.style.setProperty('--delay', delay);
+                    entry.target.classList.add(`animate-${animationType}`);
+                    // Remove observer if not a repeating animation
+                    if (!entry.target.hasAttribute('data-repeat')) {
+                        observer.unobserve(entry.target);
+                    }
+                } else if (entry.target.hasAttribute('data-repeat')) {
+                    entry.target.classList.remove(`animate-${animationType}`);
                 }
             });
         }, {
+            threshold: 0.1,
+            rootMargin: '-50px'
         });
         elements.forEach(element => {
         });
     };
+    // Parallax effect for hero background
+    const heroSection = document.querySelector('.hero-section');
+    if (heroSection) {
+        window.addEventListener('scroll', () => {
+            const scrollPosition = window.pageYOffset;
+            heroSection.style.backgroundPositionY = `${scrollPosition * 0.5}px`;
+        });
+    }
+    // Hover tilt effect for artwork cards
+    const artworkCards = document.querySelectorAll('.artwork-card');
+    artworkCards.forEach(card => {
+        card.addEventListener('mousemove', (e) => {
+            const xAxis = (window.innerWidth / 2 - e.pageX) / 25;
+            const yAxis = (window.innerHeight / 2 - e.pageY) / 25;
+            card.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
+        });
+        card.addEventListener('mouseenter', () => {
+            card.style.transition = 'transform 0.1s ease';
+        });
+        card.addEventListener('mouseleave', () => {
+            card.style.transition = 'transform 0.5s ease';
+            card.style.transform = 'rotateY(0deg) rotateX(0deg)';
+        });
+    });
+    // Initialize animations
     animateOnScroll();
+    // Animate elements when they become visible
+    const animatedElements = document.querySelectorAll('[data-animate-on-visible]');
+    const visibilityObserver = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('visible');
+            }
+        });
+    }, { threshold: 0.1 });
+    animatedElements.forEach(element => {
+        visibilityObserver.observe(element);
+    });
+    // Text reveal animation
+    const textRevealElements = document.querySelectorAll('.text-reveal');
+    textRevealElements.forEach(element => {
+        const letters = element.textContent.split('');
+        element.innerHTML = letters.map(letter =>
+            `<span class="text-reveal-char">${letter}</span>`
+        ).join('');
+        gsap.from(element.querySelectorAll('.text-reveal-char'), {
+            y: '100%',
+            opacity: 0,
+            duration: 0.6,
+            ease: 'back.out(1.7)',
+            stagger: 0.03,
+            scrollTrigger: {
+                trigger: element,
+                start: 'top 80%',
+                toggleActions: 'play none none none'
+            }
+        });
+    });
 });

style.css CHANGED Viewed

@@ -1,28 +1,103 @@
 @keyframes fadeIn {
-    from { opacity: 0; transform: translateY(20px); }
     to { opacity: 1; transform: translateY(0); }
 }
 @keyframes bounce {
     0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
-    40% { transform: translateY(-20px); }
-    60% { transform: translateY(-10px); }
 }
 .animate-fadeIn {
-    animation: fadeIn 1s ease-out forwards;
 }
-.delay-100 {
-    animation-delay: 100ms;
 }
-.delay-200 {
-    animation-delay: 200ms;
 }
 .animate-bounce {
-    animation: bounce 2s infinite;
 }
 /* Custom scrollbar */

 @keyframes fadeIn {
+    from { opacity: 0; transform: translateY(30px); }
     to { opacity: 1; transform: translateY(0); }
 }
 @keyframes bounce {
     0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
+    40% { transform: translateY(-30px); }
+    60% { transform: translateY(-15px); }
+}
+@keyframes float {
+    0% { transform: translateY(0px); }
+    50% { transform: translateY(-20px); }
+    100% { transform: translateY(0px); }
+}
+@keyframes pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+    100% { transform: scale(1); }
+}
+@keyframes gradientBG {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+@keyframes slideInLeft {
+    from { opacity: 0; transform: translateX(-50px); }
+    to { opacity: 1; transform: translateX(0); }
+}
+@keyframes slideInRight {
+    from { opacity: 0; transform: translateX(50px); }
+    to { opacity: 1; transform: translateX(0); }
+}
+@keyframes rotate {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
 }
 .animate-fadeIn {
+    animation: fadeIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
 }
+.animate-float {
+    animation: float 6s ease-in-out infinite;
 }
+.animate-pulse {
+    animation: pulse 3s ease infinite;
 }
+.animate-gradientBG {
+    background: linear-gradient(270deg, #0ea5e9, #7c3aed, #0ea5e9);
+    background-size: 400% 400%;
+    animation: gradientBG 12s ease infinite;
+}
+.animate-slideInLeft {
+    animation: slideInLeft 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+.animate-slideInRight {
+    animation: slideInRight 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+.animate-rotate {
+    animation: rotate 20s linear infinite;
+}
+.delay-100 { animation-delay: 100ms; }
+.delay-200 { animation-delay: 200ms; }
+.delay-300 { animation-delay: 300ms; }
+.delay-400 { animation-delay: 400ms; }
+.delay-500 { animation-delay: 500ms; }
 .animate-bounce {
+    animation: bounce 2.5s infinite;
+}
+/* 3D Perspective */
+.transform-style-preserve-3d {
+    transform-style: preserve-3d;
+    perspective: 1000px;
+}
+/* Text Reveal Effect */
+.text-reveal {
+    overflow: hidden;
+    display: inline-block;
+}
+.text-reveal-char {
+    display: inline-block;
+    transform: translateY(100%);
+    opacity: 0;
 }
 /* Custom scrollbar */