update parallax and scrolling effects

wheattoast11 · Nov 30, 2024 · 0efb6d1 · 0efb6d1
1 parent 0f6088a
commit 0efb6d1
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 37 deletions.
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -49,7 +49,9 @@ function Home({ onMount }) {
       variants={containerVariants}
     >
       <motion.section className="hero-section" variants={itemVariants}>
-        <h1 className="gradient-text">Intuition Labs</h1>
+        <h1 className="gradient-text" data-text="Intuition Labs">
+          Intuition Labs
+        </h1>
         <p className="tagline">Pioneering the future of AI through intuitive design</p>
         <div className="cta-container">
           <motion.a

diff --git a/src/ui/ScrollEffects.js b/src/ui/ScrollEffects.js
@@ -1,54 +1,41 @@
 export class ScrollEffects {
   constructor() {
     this.init();
-    this.setupParallax();
   }
 
   init() {
-    const sections = document.querySelectorAll('.section');
     const options = {
       root: null,
-      rootMargin: '0px',
+      rootMargin: '20px', 
       threshold: buildThresholdList()
     };
 
     const observer = new IntersectionObserver((entries) => {
       entries.forEach(entry => {
         if (entry.isIntersecting) {
-          const ratio = entry.intersectionRatio;
-          entry.target.style.opacity = Math.min(ratio * 1.5, 1);
-          entry.target.style.transform = `translateY(${(1 - ratio) * 20}px)`;
-
-          // Animate children with stagger
-          const children = entry.target.children;
-          Array.from(children).forEach((child, index) => {
-            child.style.transitionDelay = `${index * 100}ms`;
-            child.classList.add('visible');
-          });
+          entry.target.classList.add('visible');
+          if (entry.target.dataset.parallax) {
+            this.setupParallaxForElement(entry.target);
+          }
         }
       });
     }, options);
 
-    sections.forEach(section => {
-      section.style.opacity = '0';
-      section.style.transform = 'translateY(20px)';
-      section.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out';
-      observer.observe(section);
+    document.querySelectorAll('.section, [data-parallax]').forEach(el => {
+      observer.observe(el);
     });
   }
 
-  setupParallax() {
-    const parallaxElements = document.querySelectorAll('[data-parallax]');
+  setupParallaxForElement(element) {
+    const speed = element.dataset.parallax || 0.5;
 
-    window.addEventListener('scroll', () => {
-      const scrolled = window.pageYOffset;
-
-      parallaxElements.forEach(element => {
-        const speed = element.dataset.parallax || 0.5;
-        const offset = scrolled * speed;
-        element.style.transform = `translateY(${offset}px)`;
-      });
-    });
+    const handleScroll = () => {
+      const scrolled = window.scrollY;
+      const offset = scrolled * speed;
+      element.style.transform = `translateY(${offset}px)`;
+    };
+
+    window.addEventListener('scroll', handleScroll);
   }
 }
 

diff --git a/style.css b/style.css
@@ -1,7 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Space+Mono&family=Syncopate:wght@700&family=Cinzel&family=Audiowide&family=Cormorant+Garamond:ital@1&display=swap');
 
 :root {
-    --font-display: system-ui, -apple-system, sans-serif;
+    --primary: #7A9E9F;
     --text: rgba(255, 255, 255, 0.9);
     --accent: #7A9E9F;
     --background: #000000;
@@ -27,27 +27,74 @@ body {
 }
 
 .gradient-text {
-    background: linear-gradient(135deg, var(--primary) 0%, var(--glow) 100%);
+    background: linear-gradient(
+        135deg,
+        var(--text) 0%,
+        var(--glow) 50%,
+        var(--accent) 100%
+    );
     -webkit-background-clip: text;
     background-clip: text;
-    -webkit-text-fill-color: transparent;
+    color: transparent;
+    position: relative;
+}
+
+.gradient-text::after {
+    content: attr(data-text);
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: -1;
+    background: inherit;
+    filter: blur(25px);
+    opacity: 0.5;
 }
 
 .cta-button {
+    display: inline-block;
     padding: 1rem 2rem;
-    border: 1px solid var(--primary);
+    border: 2px solid var(--primary);
     border-radius: 4px;
     text-decoration: none;
-    color: white;
-    transition: all 0.3s ease;
+    color: var(--text);
+    font-weight: 500;
+    letter-spacing: 0.02em;
+    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+    position: relative;
+    overflow: hidden;
+    z-index: 1;
+}
+
+.cta-button::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--primary);
+    transform: scaleX(0);
+    transform-origin: right;
+    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+    z-index: -1;
+}
+
+.cta-button:hover::before {
+    transform: scaleX(1);
+    transform-origin: left;
 }
 
 .cta-button.primary {
     background: var(--primary);
 }
 
-.cta-button.secondary {
+.cta-button.primary:hover {
     background: transparent;
+    color: var(--primary);
+}
+
+.cta-button.secondary:hover {
+    color: var(--background);
 }
 
 canvas {

diff --git a/vite.config.js b/vite.config.js
@@ -1,5 +1,7 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import autoprefixer from 'autoprefixer';
+import cssnano from 'cssnano';
 
 export default defineConfig({
   base: '/',
@@ -63,5 +65,13 @@ export default defineConfig({
         frame-ancestors 'none';
       `.replace(/\s+/g, ' ').trim()
     }
+  },
+  css: {
+    postcss: {
+      plugins: [
+        autoprefixer(),
+        cssnano({ preset: 'default' })
+      ]
+    }
   }
 });