start

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
start [2026/06/11 21:08] – jumpstartadminstart [2026/06/11 21:28] (current) – jumpstartadmin
Line 57: Line 57:
 .js-card:hover .js-overlay { opacity: 0.3; } .js-card:hover .js-overlay { opacity: 0.3; }
  
-.js-label { position: absolute; left: 0; width: 100%; z-index: 3; padding: 16px; font-family: 'Forevs', serif; font-size: 1.8em; color: rgba(237,232,245,0.85); letter-spacing: 6px; text-align: center; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0,0,0,0.9), 0 -1px 0 rgba(255,255,255,0.05); top: 50%; transform: translateY(-50%); transition: top 0.35s ease, transform 0.35s ease, letter-spacing 0.4s ease, color 0.4s ease, text-shadow 0.4s ease, opacity 0.4s ease; opacity: 0.7; }+.js-label { position: absolute; left: 0; width: 100%; z-index: 3; padding: 16px; font-family: 'Forevs', serif; font-size: 2.7em; color: rgba(237,232,245,0.85); letter-spacing: 6px; text-align: center; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0,0,0,0.9), 0 -1px 0 rgba(255,255,255,0.05); top: 50%; transform: translateY(-50%); transition: top 0.35s ease, transform 0.35s ease, letter-spacing 0.4s ease, color 0.4s ease, text-shadow 0.4s ease, opacity 0.4s ease; opacity: 0.7; }
  
 .js-card:hover .js-label { top: 88%; transform: translateY(-50%); letter-spacing: 10px; color: #ffffff; opacity: 1; text-shadow: 0 0 1px rgba(255,255,255,0.9), 0 0 2px rgba(255,255,255,0.5), 1px 1px 0 rgba(0,0,0,1), -1px -1px 0 rgba(0,0,0,1), 1px -1px 0 rgba(0,0,0,1), -1px 1px 0 rgba(0,0,0,1), 0 2px 8px rgba(0,0,0,0.9), inset 0 0 0 1px rgba(255,255,255,0.1); filter: contrast(1.2) brightness(1.1); } .js-card:hover .js-label { top: 88%; transform: translateY(-50%); letter-spacing: 10px; color: #ffffff; opacity: 1; text-shadow: 0 0 1px rgba(255,255,255,0.9), 0 0 2px rgba(255,255,255,0.5), 1px 1px 0 rgba(0,0,0,1), -1px -1px 0 rgba(0,0,0,1), 1px -1px 0 rgba(0,0,0,1), -1px 1px 0 rgba(0,0,0,1), 0 2px 8px rgba(0,0,0,0.9), inset 0 0 0 1px rgba(255,255,255,0.1); filter: contrast(1.2) brightness(1.1); }
Line 97: Line 97:
 } }
  
-.js-title-sub { font-family: 'Forevs', serif; font-weight: normal; font-size: 3em; letter-spacing: 10px; text-transform: uppercase; color: rgba(184,173,219,0.9); text-shadow: 0 2px 10px rgba(0,0,0,0.9); animation: revealUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.6s both; }+.js-title-sub { font-family: 'Forevs', serif; font-weight: normal; font-size: 3.2em; letter-spacing: 10px; text-transform: uppercase; color: rgba(184,173,219,0.9); text-shadow: 0 2px 10px rgba(0,0,0,0.9); animation: revealUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.6s both; }
  
-.js-title-main { font-family: 'Forevs', serif; font-weight: bold; font-size: 8em; letter-spacing: 8px; text-transform: uppercase; color: #EDE8F5; line-height: 1; text-shadow: 0 0 60px rgba(107,79,187,0.9), 0 0 20px rgba(107,79,187,0.5), 0 4px 15px rgba(0,0,0,0.9); animation: revealUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.3s both, glowPulse 4s 1.5s ease-in-out infinite; }+.js-title-main { font-family: 'Forevs', serif; font-weight: bold; font-size: 8.2em; letter-spacing: 8px; text-transform: uppercase; color: #EDE8F5; line-height: 1; text-shadow: 0 0 60px rgba(107,79,187,0.9), 0 0 20px rgba(107,79,187,0.5), 0 4px 15px rgba(0,0,0,0.9); animation: revealUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.3s both, glowPulse 4s 1.5s ease-in-out infinite; }
  
 .js-title-divider { display: flex; align-items: center; gap: 10px; margin-top: 4px; animation: fadeIn 0.6s ease 1s both; } .js-title-divider { display: flex; align-items: center; gap: 10px; margin-top: 4px; animation: fadeIn 0.6s ease 1s both; }
Line 121: Line 121:
 .js-card:nth-child(4) { animation: fadeUp 0.6s 0.45s ease both; } .js-card:nth-child(4) { animation: fadeUp 0.6s 0.45s ease both; }
  
-/* Non-hovered cards — VHS chromatic aberration, JS controlled */+/* VHS chromatic aberration — JS controlled */
 .js-card { .js-card {
     position: relative;     position: relative;
Line 127: Line 127:
     overflow: hidden;     overflow: hidden;
     text-decoration: none;     text-decoration: none;
-    transition: filter 0.6s ease !important;+    transition: filter 0.25s ease !important;
 } }
  
 .js-card.js-fading { .js-card.js-fading {
-    filter: saturate(0.5) brightness(0.9) blur(0.4px) !important;+    filter: saturate(0.55) brightness(0.92) !important;
 } }
  
-/* Red channel bleed — shifts right */ +/* Scanline overlay on fading cards */
-.js-card.js-fading::before { +
-    content: '' !important; +
-    position: absolute !important; +
-    inset: -2px !important; +
-    z-index: 10 !important; +
-    pointer-events: none !important; +
-    background: inherit !important; +
-    mix-blend-mode: screen !important; +
-    transform: translateX(3px) !important; +
-    filter: saturate(3) hue-rotate(-30deg) opacity(0.18) !important; +
-    animation: none !important; +
-} +
- +
-/* Blue channel bleed — shifts left + scanlines */+
 .js-card.js-fading::after { .js-card.js-fading::after {
     content: '' !important;     content: '' !important;
     position: absolute !important;     position: absolute !important;
     inset: 0 !important;     inset: 0 !important;
-    z-index: 11 !important;+    z-index: 12 !important;
     pointer-events: none !important;     pointer-events: none !important;
-    background: +    background: repeating-linear-gradient( 
-        repeating-linear-gradient( +        0deg, 
-            0deg, +        transparent 0px, 
-            transparent 0px, +        transparent 3px, 
-            transparent 1px, +        rgba(0, 0, 0, 0.08) 3px, 
-            rgba(100, 140, 255, 0.06) 1px, +        rgba(0, 0, 0, 0.08) 4px 
-            rgba(100, 140, 255, 0.06) 2px, +    ) !important;
-            transparent 2px, +
-            transparent 4px, +
-            rgba(255, 60, 60, 0.04) 4px, +
-            rgba(255, 60, 60, 0.04) 5px +
-        ) !important; +
-    mix-blend-mode: screen !important; +
-    animation: vhsDrift 6s linear infinite !important; +
-    transform: translateX(-2px) !important;+
 } }
  
-@keyframes vhsDrift { +/* RGB canvas overlay */ 
-    0%   { background-position: 0 0; } +.js-rgb-canvas { 
-    100% { background-position: 0 400px; }+    position: absolute; 
 +    inset: 0; 
 +    z-index: 11; 
 +    pointer-events: none; 
 +    opacity: 0; 
 +    transition: opacity 0.6s ease; 
 +} 
 +.js-card.js-fading .js-rgb-canvas { 
 +    opacity: 1; 
 +} 
 + 
 +/* Block card hover effects when title zone is active */ 
 +.js-wrap.js-title-active .js-card:hover video { 
 +    transform: scale(1) !important; 
 +    filter: brightness(0.6) saturate(0.8) !important; 
 +} 
 +.js-wrap.js-title-active .js-card:hover .js-overlay { 
 +    opacity: 1 !important; 
 +} 
 +.js-wrap.js-title-active .js-card:hover .js-label { 
 +    top: 50% !important; 
 +    transform: translateY(-50%) !important; 
 +    letter-spacing: 4px !important; 
 +    color: #EDE8F5 !important; 
 +    text-shadow: 0 1px 0 rgba(0,0,0,0.9), 0 -1px 0 rgba(255,255,255,0.05) !important; 
 +    opacity: 0.7 !important; 
 +} 
 +.js-wrap.js-title-active .js-card:hover .js-label::before { 
 +    transform: translateX(-50%) scaleX(0) !important; 
 +} 
 +.js-wrap.js-title-active .js-card:hover .js-label::after { 
 +    opacity: 0 !important;
 } }
  
Line 323: Line 332:
  
 <script> <script>
-// VHS chromatic aberration — center zone trigger with smooth switching+// VHS RGB chromatic aberration using canvas
 (function() { (function() {
     const cards = document.querySelectorAll('.js-card');     const cards = document.querySelectorAll('.js-card');
 +    const wrap = document.querySelector('.js-wrap');
 +    const titleEl = document.querySelector('.js-title-main');
     let activeCard = null;     let activeCard = null;
     let fadeTimeout = null;     let fadeTimeout = null;
-    let entryTimeout = null;+    const canvases = new Map(); 
 +    const animFrames = new Map();
  
-    function isInCenterZone(card, e) { +    // Create a canvas overlay for each card 
-        const rect = card.getBoundingClientRect(); +    cards.forEach(card => { 
-        const zoneX = rect.width * 0.125; +        const canvas = document.createElement('canvas'); 
-        const zoneY = rect.height * 0.125; +        canvas.className = 'js-rgb-canvas'; 
-        const x = e.clientX - rect.left; +        card.appendChild(canvas); 
-        const y = e.clientY - rect.top; +        canvases.set(card, canvas); 
-        return x > zoneX && x < rect.width - zoneX && y > zoneY && y < rect.height - zoneY;+    }); 
 + 
 +    function drawRGB(card) { 
 +        const canvas = canvases.get(card); 
 +        const video = card.querySelector('video'); 
 +        if (!video || !canvas) return; 
 + 
 +        const w = card.offsetWidth; 
 +        const h = card.offsetHeight; 
 +        canvas.width = w; 
 +        canvas.height = h; 
 +        const ctx = canvas.getContext('2d'); 
 + 
 +        function frame() { 
 +            if (!card.classList.contains('js-fading')) { 
 +                ctx.clearRect(0, 0, w, h); 
 +                animFrames.delete(card); 
 +                return; 
 +            } 
 +            ctx.clearRect(0, 0, w, h); 
 + 
 +            ctx.save(); 
 +            ctx.globalCompositeOperation = 'screen'; 
 +            ctx.globalAlpha = 0.18; 
 +            ctx.filter = 'saturate(4) hue-rotate(-20deg)'; 
 +            ctx.drawImage(video, 4, 0, w, h); 
 +            ctx.restore(); 
 + 
 +            ctx.save(); 
 +            ctx.globalCompositeOperation = 'screen'; 
 +            ctx.globalAlpha = 0.14; 
 +            ctx.filter = 'saturate(4) hue-rotate(160deg)'; 
 +            ctx.drawImage(video, -4, 0, w, h); 
 +            ctx.restore(); 
 + 
 +            animFrames.set(card, requestAnimationFrame(frame)); 
 +        } 
 + 
 +        if (!animFrames.has(card)) { 
 +            animFrames.set(card, requestAnimationFrame(frame)); 
 +        } 
 +    } 
 + 
 +    function isTitleZone(e) { 
 +        const sub = document.querySelector('.js-title-sub'); 
 +        const main = document.querySelector('.js-title-main'); 
 +        const divider = document.querySelector('.js-title-divider'); 
 +        if (!sub || !main) return false; 
 +        const top = sub.getBoundingClientRect().top - 20; 
 +        const bottom = (divider || main).getBoundingClientRect().bottom + 20; 
 +        const left = main.getBoundingClientRect().left - 40; 
 +        const right = main.getBoundingClientRect().right + 40; 
 +        return e.clientX >= left && e.clientX <= right && 
 +               e.clientY >= top && e.clientY <= bottom; 
 +    } 
 + 
 +    function setTitleGlow(on) { 
 +        if (!titleEl) return; 
 +        if (on) { 
 +            titleEl.style.transition = 'text-shadow 0.3s ease'; 
 +            titleEl.style.textShadow = '0 0 120px rgba(184,173,219,1), 0 0 60px rgba(107,79,187,1), 0 0 25px rgba(255,255,255,0.8), 0 4px 15px rgba(0,0,0,0.9)'; 
 +            titleEl.style.color = '#ffffff'; 
 +        } else { 
 +            titleEl.style.transition = 'text-shadow 0.3s ease, color 0.3s ease'; 
 +            titleEl.style.textShadow = ''; 
 +            titleEl.style.color = ''; 
 +        }
     }     }
  
Line 342: Line 420:
         if (activeCard === hoveredCard) return;         if (activeCard === hoveredCard) return;
         activeCard = hoveredCard;         activeCard = hoveredCard;
 +        setTitleGlow(false);
 +        wrap.classList.remove('js-title-active');
         cards.forEach(card => {         cards.forEach(card => {
             if (card !== hoveredCard) {             if (card !== hoveredCard) {
                 card.classList.add('js-fading');                 card.classList.add('js-fading');
-                card.classList.remove('js-active');+                drawRGB(card);
             } else {             } else {
                 card.classList.remove('js-fading');                 card.classList.remove('js-fading');
-                card.classList.add('js-active'); 
             }             }
         });         });
Line 355: Line 434:
     function clearFading() {     function clearFading() {
         activeCard = null;         activeCard = null;
-        cards.forEach(card => { +        setTitleGlow(false); 
-            card.classList.remove('js-fading'); +        wrap.classList.remove('js-title-active'); 
-            card.classList.remove('js-active'); +        cards.forEach(card => card.classList.remove('js-fading'));
-        });+
     }     }
  
-    cards.forEach(card => { +    function enterTitleZone() { 
-        card.addEventListener('mousemove', function(e) { +        activeCard = 'title'; 
-            if (isInCenterZone(card, e)) { +        setTitleGlow(true); 
-                clearTimeout(fadeTimeout); +        wrap.classList.add('js-title-active'); 
-                // Only trigger after staying in center zone for 200ms +        cards.forEach(card => card.classList.remove('js-fading')); 
-                if (!entryTimeout) { +    } 
-                    entryTimeout = setTimeout(() => { + 
-                        setFading(card); +    wrap.addEventListener('mousemove', function(e) { 
-                        entryTimeout = null; +        if (isTitleZone(e)) { 
-                    }, 200); +            clearTimeout(fadeTimeout); 
-                } +            if (activeCard !== 'title') enterTitleZone(); 
-            } else { +            return; 
-                clearTimeout(entryTimeout); +        } 
-                entryTimeout = null; + 
-                // Only clear after leaving for 400ms +        // Find which card the mouse is over 
-                clearTimeout(fadeTimeout); +        let overCard = null; 
-                fadeTimeout = setTimeout(clearFading, 400);+        cards.forEach(card => { 
 +            const rect = card.getBoundingClientRect(); 
 +            if (e.clientX >= rect.left && e.clientX <= rect.right && 
 +                e.clientY >= rect.top && e.clientY <= rect.bottom) { 
 +                overCard = card;
             }             }
         });         });
  
-        card.addEventListener('mouseleave', function() { +        if (overCard) {
-            clearTimeout(entryTimeout); +
-            entryTimeout = null;+
             clearTimeout(fadeTimeout);             clearTimeout(fadeTimeout);
-            fadeTimeout = setTimeout(clearFading, 400); +            setFading(overCard); 
-        });+        } 
 +    }); 
 + 
 +    wrap.addEventListener('mouseleave', function() { 
 +        clearTimeout(fadeTimeout); 
 +        fadeTimeout = setTimeout(clearFading, 150);
     });     });
 })(); })();
 </script> </script>
 </html> </html>
  • start.1781212098.txt.gz
  • Last modified: 2026/06/11 21:08
  • by jumpstartadmin