The Complete
Eidola Universe

// ── ALBUM SELECTOR ── (function() { var N = 6; var RGBS = [[184, 200, 220], [194, 148, 80], [68, 153, 255], [154, 176, 200], [224, 0, 106], [232, 180, 208]]; var ARTS = ['tgge-art.jpg', 'degen-art.jpg', 'tstl-art.png', 'architect-art.jpg', 'eviscerate-art.jpg', 'mend-art.jpg']; var section = document.getElementById('al-section'); var strip = document.getElementById('al-strip'); var wrap = document.getElementById('al-strip-wrap'); var bg = document.getElementById('al-bg'); var dots = Array.from(document.querySelectorAll('.al-dot')); var cards = Array.from(document.querySelectorAll('.al-card')); var panels = Array.from(document.querySelectorAll('.al-info-panel')); var btnPrev = document.getElementById('al-prev'); var btnNext = document.getElementById('al-next'); var curEl = document.getElementById('al-cur'); var cur = 0; // Card sizing — responsive function cardW() { return window.innerWidth < 640 ? 220 : 280; } function cardH() { return window.innerWidth < 640 ? 300 : 380; } function gap() { return window.innerWidth < 640 ? 16 : 24; } function sideMargin() { return (window.innerWidth - cardW()) / 2; } function initCards() { var w = cardW(), h = cardH(), g = gap(), sm = sideMargin(); cards.forEach(function(c) { c.style.width = w + 'px'; c.style.height = h + 'px'; c.style.margin = '0 ' + (g/2) + 'px'; c.style.borderRadius = '12px'; }); strip.style.paddingLeft = sm + 'px'; strip.style.paddingRight = sm + 'px'; } function offsetFor(idx) { var w = cardW(), g = gap(), sm = sideMargin(); // Offset so card idx is centred in viewport return -(idx * (w + g)); } function goTo(idx) { idx = ((idx % N) + N) % N; var prev = cur; cur = idx; // Move strip strip.style.transform = 'translateX(' + offsetFor(idx) + 'px)'; // Update cards cards.forEach(function(c, i) { var active = i === idx; c.classList.toggle('active', active); var dist = Math.min(Math.abs(i-idx), N - Math.abs(i-idx)); c.style.transform = active ? 'scale(1.06) translateY(-6px)' : 'scale(' + Math.max(0.88, 1 - dist*0.05) + ') translateY(0)'; c.style.filter = 'blur(' + (dist * 1.5) + 'px)'; c.style.opacity = Math.max(0.25, 1 - dist * 0.28); // Holographic sweep on newly active card if (active && i !== prev) { c.classList.remove('sweeping'); requestAnimationFrame(function() { c.classList.add('sweeping'); }); } }); // Info panels panels.forEach(function(p, i) { p.classList.toggle('active', i === idx); }); // Background if (bg) bg.style.backgroundImage = 'url(' + ARTS[idx] + ')'; // Dots + counter dots.forEach(function(d, i) { d.classList.toggle('active', i === idx); }); if (curEl) curEl.textContent = String(idx+1).padStart(2,'0'); // Accent colour smooth lerp startLerp(idx); } // Colour lerp var lerpFrom=[184,200,220], lerpTo=[184,200,220], lerpT=1, lerpStart=0; function ease(t) { return t<.5?4*t*t*t:1-Math.pow(-2*t+2,3)/2; } function lerpTick(ts) { if(lerpT>=1)return; if(!lerpStart)lerpStart=ts; lerpT=Math.min(1,(ts-lerpStart)/650); var e=ease(lerpT); var r=Math.round(lerpFrom[0]+(lerpTo[0]-lerpFrom[0])*e); var g=Math.round(lerpFrom[1]+(lerpTo[1]-lerpFrom[1])*e); var b=Math.round(lerpFrom[2]+(lerpTo[2]-lerpFrom[2])*e); if(section){ section.style.setProperty('--sel-r',r); section.style.setProperty('--sel-g',g); section.style.setProperty('--sel-b',b); } if(lerpT<1)requestAnimationFrame(lerpTick); } function startLerp(idx){ var cs=getComputedStyle(section); lerpFrom=[ parseInt(cs.getPropertyValue('--sel-r'))||184, parseInt(cs.getPropertyValue('--sel-g'))||200, parseInt(cs.getPropertyValue('--sel-b'))||220, ]; lerpTo=[...RGBS[idx]]; lerpT=0; lerpStart=0; requestAnimationFrame(lerpTick); } // Nav btnPrev && btnPrev.addEventListener('click', function() { goTo(cur-1); }); btnNext && btnNext.addEventListener('click', function() { goTo(cur+1); }); dots.forEach(function(d) { d.addEventListener('click', function() { goTo(+d.dataset.idx); }); }); cards.forEach(function(card) { card.addEventListener('click', function() { if (dragged) return; var idx = +card.dataset.idx; if (idx !== cur) goTo(idx); }); }); // Keyboard document.addEventListener('keydown', function(e) { if (e.target.closest('input,textarea,select,button')) return; if (e.key==='ArrowLeft'||e.key==='ArrowUp') goTo(cur-1); if (e.key==='ArrowRight'||e.key==='ArrowDown') goTo(cur+1); }); // Touch/mouse drag on strip var startX=0, startOff=0, dragged=false; function getOff() { return offsetFor(cur); } wrap.addEventListener('mousedown', function(e) { startX=e.clientX; startOff=offsetFor(cur); dragged=false; strip.style.transition='none'; }); window.addEventListener('mousemove', function(e) { if(!startX && startX!==0) return; if(Math.abs(e.clientX-startX)>4) dragged=true; if(!dragged) return; strip.style.transform='translateX('+(startOff+(e.clientX-startX))+'px)'; }); window.addEventListener('mouseup', function(e) { if(!dragged && startX===0) return; strip.style.transition=''; var dx=e.clientX-startX; startX=null; if(Math.abs(dx)>50) goTo(dx<0?cur+1:cur-1); else goTo(cur); }); var touchX=null; wrap.addEventListener('touchstart', function(e) { touchX=e.touches[0].clientX; startOff=offsetFor(cur); dragged=false; strip.style.transition='none'; }, {passive:true}); wrap.addEventListener('touchmove', function(e) { if(touchX===null) return; var dx=e.touches[0].clientX-touchX; if(Math.abs(dx)>6) dragged=true; if(!dragged) return; strip.style.transform='translateX('+(startOff+dx)+'px)'; }, {passive:true}); wrap.addEventListener('touchend', function(e) { if(touchX===null) return; strip.style.transition=''; var dx=e.changedTouches[0].clientX-touchX; touchX=null; if(Math.abs(dx)>50) goTo(dx<0?cur+1:cur-1); else goTo(cur); }, {passive:true}); // Resize window.addEventListener('resize', function() { initCards(); strip.style.transition='none'; strip.style.transform='translateX('+offsetFor(cur)+'px)'; requestAnimationFrame(function(){ strip.style.transition=''; }); }); // Init initCards(); goTo(0); })(); // ── PARALLAX HERO ── (function() { var bg=document.getElementById('hero-bg'), back=document.getElementById('hero-fig-back'), front=document.getElementById('hero-fig-front'); if(!bg) return; var raf=false; function tick() { var sy=window.scrollY; if(sy>window.innerHeight*1.5) return; if(bg) bg.style.transform='translateY('+(sy*.28)+'px)'; if(back) back.style.transform='translateY('+(sy*.16)+'px)'; if(front) front.style.transform='translateY('+(sy*.07)+'px)'; } window.addEventListener('scroll',function(){ if(!raf){ requestAnimationFrame(function(){ tick(); raf=false; }); raf=true; } },{passive:true}); tick(); })(); Buy Me a Coffee