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 07:40] – jumpstartadminstart [2026/06/11 08:33] (current) – jumpstartadmin
Line 1: Line 1:
 <html> <html>
 <style> <style>
-.js-wrap { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 50vh); gap: 4px; background: #120F29; }+@font-face { font-family: 'Forevs'; src: url('/wiki/lib/tpl/bootstrap3/fonts/ForevsDemo-Regular.otf') format('opentype'); font-weight: normal; } 
 +@font-face { font-family: 'Forevs'; src: url('/wiki/lib/tpl/bootstrap3/fonts/ForevsDemo-Bold.otf') format('opentype'); font-weight: bold; } 
 + 
 +/* Grid fills full viewport — navbar floats over it */ 
 +.js-wrap { 
 +    position: fixed; 
 +    top: 0; 
 +    left: 0; 
 +    width: 100vw; 
 +    height: 100vh; 
 +    z-index: 999; 
 +    display: grid; 
 +    grid-template-columns: repeat(2, 1fr); 
 +    grid-template-rows: repeat(2, 50vh); 
 +    gap: 4px; 
 +    background: #120F29; 
 +} 
 + 
 +/* Scanline overlay */ 
 +.js-wrap::after { 
 +    content: ''; 
 +    position: absolute; 
 +    inset: 0; 
 +    z-index: 100; 
 +    pointer-events: none; 
 +    background: repeating-linear-gradient( 
 +        to bottom, 
 +        rgba(0,0,0,0.03) 0px, 
 +        rgba(0,0,0,0.03) 1px, 
 +        transparent 1px, 
 +        transparent 3px 
 +    ); 
 +} 
 + 
 +/* Edge vignette */ 
 +.js-wrap::before { 
 +    content: ''; 
 +    position: absolute; 
 +    inset: 0; 
 +    z-index: 101; 
 +    pointer-events: none; 
 +    background: 
 +        linear-gradient(to right, rgba(10,6,26,0.7) 0%, transparent 12%, transparent 88%, rgba(10,6,26,0.7) 100%), 
 +        linear-gradient(to bottom, rgba(10,6,26,0.7) 0%, transparent 12%, transparent 88%, rgba(10,6,26,0.7) 100%); 
 +} 
 .js-card { position: relative; display: block; overflow: hidden; text-decoration: none; } .js-card { position: relative; display: block; overflow: hidden; text-decoration: none; }
-.js-card video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } + 
-.js-overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to bottom, rgba(26,20,51,0.1) 0%, rgba(26,20,51,0.75) 100%); transition: opacity 0.4s ease; } +.js-card video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1); filter: brightness(0.6) saturate(0.8); transition: transform 0.6s ease, filter 0.6s ease; } 
-.js-card:hover .js-overlay { opacity: 0; } + 
-.js-label { position: absolute; left: 0; width: 100%; z-index: 3; padding: 16px; font-family: 'Forevs', serif; font-size: 1.8em; color: #EDE8F5; letter-spacing: 3px; text-align: center; text-shadow: 0 2px 12px rgba(0,0,0,0.9); top: 50%; transform: translateY(-50%); transition: top 0.35s ease, transform 0.35s ease; } +.js-card:hover video { transform: scale(1.02); filter: brightness(1) saturate(1.1); } 
-.js-card:hover .js-label { top: 88%; transform: translateY(-50%); } + 
-.js-title { position: fixed; top: 55px; left: 0; width: 100%; z-index: 1000; text-align: center; font-family: 'Forevs', serif; font-size: 1.6em; letter-spacing: 6px; text-transform: uppercase; color: #EDE8F5; text-shadow: 0 2px 20px rgba(0,0,0,0.9); pointer-events: none; animation: fadeDown 0.7s ease both; } +.js-overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to bottom, rgba(26,20,51,0.0) 0%, rgba(26,20,51,0.85) 100%); transition: opacity 0.4s ease; } 
-.js-title span { color: #B8ADDB; } + 
-@keyframes fadeDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }+.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: #EDE8F5; letter-spacing: 4px; text-align: center; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0,0,0,0.9); top: 50%; transform: translateY(-50%); transition: top 0.35s ease, transform 0.35s ease, letter-spacing 0.35s ease, color 0.35s ease; } 
 + 
 +.js-card:hover .js-label { top: 88%; transform: translateY(-50%); letter-spacing: 6px; color: #ffffff; } 
 + 
 +/* Dark vignette behind title */ 
 +.js-title-bg { 
 +    position: fixed; 
 +    top: 50%; 
 +    left: 50%; 
 +    transform: translate(-50%, -50%); 
 +    width: 600px; 
 +    height: 300px; 
 +    z-index: 1000; 
 +    pointer-events: none; 
 +    background: radial-gradient(ellipse at center, rgba(10,6,26,0.92) 0%, rgba(10,6,26,0.6) 45%, transparent 70%); 
 +    animation: fadeIn 0.8s ease 0.2s both; 
 +} 
 + 
 +/* Title — centered in full viewport */ 
 +.js-title { 
 +    position: fixed; 
 +    top: 0; 
 +    left: 0; 
 +    width: 100vw; 
 +    height: 100vh; 
 +    z-index: 1002; 
 +    pointer-events: none; 
 +    display: flex; 
 +    flex-direction: column; 
 +    align-items: center; 
 +    justify-content: center; 
 +    gap: 4px; 
 +    animation: floatY 4s ease-in-out infinite; 
 +} 
 + 
 +@keyframes floatY { 
 +    0%, 100% { transform: translateY(0px); } 
 +    50% { transform: translateY(-8px); } 
 +} 
 + 
 +.js-title-sub { font-family: 'Forevs', serif; font-weight: normal; font-size: 0.75em; 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: 3.5em; 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-line { height: 1px; width: 100px; background: linear-gradient(to right, transparent, rgba(184,173,219,0.6), transparent); } 
 +.js-title-divider-diamond { width: 5px; height: 5px; background: rgba(184,173,219,0.9); transform: rotate(45deg); box-shadow: 0 0 6px rgba(184,173,219,0.8); } 
 + 
 +/* Particle canvas — full viewport */ 
 +#js-particles { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1001; pointer-events: none; } 
 + 
 +@keyframes revealUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } 
 +@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } 
 +@keyframes glowPulse { 
 +    0%, 100% { 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); } 
 +    50% { text-shadow: 0 0 90px rgba(107,79,187,1), 0 0 40px rgba(184,173,219,0.5), 0 4px 15px rgba(0,0,0,0.9); } 
 +}
 @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
 +
 .js-card:nth-child(1) { animation: fadeUp 0.6s 0.15s ease both; } .js-card:nth-child(1) { animation: fadeUp 0.6s 0.15s ease both; }
 .js-card:nth-child(2) { animation: fadeUp 0.6s 0.25s ease both; } .js-card:nth-child(2) { animation: fadeUp 0.6s 0.25s ease both; }
Line 18: Line 122:
 </style> </style>
  
-<div class="js-title"><span>JumpStart</span> Movement Wiki</div>+<div class="js-title-bg"></div> 
 + 
 +<div class="js-title"> 
 +    <div class="js-title-sub">Movement Wiki</div> 
 +    <div class="js-title-main">JumpStart</div> 
 +    <div class="js-title-divider"> 
 +        <div class="js-title-divider-line"></div> 
 +        <div class="js-title-divider-diamond"></div> 
 +        <div class="js-title-divider-line"></div> 
 +    </div> 
 +</div> 
 + 
 +<canvas id="js-particles"></canvas>
  
 <div class="js-wrap"> <div class="js-wrap">
Line 57: Line 173:
  
 <script> <script>
-document.querySelectorAll('.js-card').forEach(card => { +const canvas = document.getElementById('js-particles'); 
-  const video = card.querySelector('video'); +const ctx = canvas.getContext('2d'); 
-  video.load(); +canvas.width = window.innerWidth; 
-  video.pause(); +canvas.height = window.innerHeight; 
-  card.addEventListener('mouseenter', () => video.play()); + 
-  card.addEventListener('mouseleave', () => { video.pause(); video.currentTime = 0; });+const cx = canvas.width / 2; 
 +const cy = canvas.height / 2; 
 +const particles = []; 
 + 
 +function randomRange(a, b) { return a + Math.random() * (b - a); } 
 + 
 +for (let i = 0; i < 60; i++) { 
 +    particles.push({ 
 +        x: cx + randomRange(-180, 180), 
 +        y: cy + randomRange(-80, 80), 
 +        vx: randomRange(-0.3, 0.3), 
 +        vy: randomRange(-0.8, -0.2), 
 +        size: randomRange(1, 2.5), 
 +        alpha: randomRange(0.4, 1), 
 +        fade: randomRange(0.003, 0.008), 
 +        color: Math.random() > 0.5 ? '184,173,219' : '107,79,187' 
 +    }); 
 +} 
 + 
 +function resetParticle(p) { 
 +    p.x = cx + randomRange(-180, 180); 
 +    p.y = cy + randomRange(-80, 80); 
 +    p.vx = randomRange(-0.3, 0.3); 
 +    p.vy = randomRange(-0.8, -0.2); 
 +    p.alpha = randomRange(0.4, 1); 
 +    p.size = randomRange(1, 2.5); 
 +    p.fade = randomRange(0.003, 0.008); 
 +} 
 + 
 +function draw() { 
 +    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 +    particles.forEach(p => { 
 +        p.x += p.vx; 
 +        p.y += p.vy; 
 +        p.alpha -= p.fade; 
 +        if (p.alpha <= 0) resetParticle(p); 
 +        ctx.beginPath(); 
 +        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2); 
 +        ctx.fillStyle = `rgba(${p.color},${p.alpha})`; 
 +        ctx.fill(); 
 +    }); 
 +    requestAnimationFrame(draw); 
 +} 
 + 
 +draw(); 
 + 
 +window.addEventListener('resize', () => { 
 +    canvas.width = window.innerWidth; 
 +    canvas.height = window.innerHeight;
 }); });
 </script> </script>
 </html> </html>
  • start.1781163630.txt.gz
  • Last modified: 2026/06/11 07:40
  • by jumpstartadmin