Máté Rebeka - StoDeco pályaműve

A koncepció a felület finom plaszticitásával és geometrikus ritmusával dolgozik. Az elem két különböző mélységű síkból épül fel: a szürkével jelölt részek 1 mm, míg a fehér zónák 2,5 mm magasságban emelkednek ki, így a homlokzaton fény–árnyék játék jön létre, amely napszaktól függően folyamatosan változik. Az elem 180°-os elforgatásával két eltérő mintázat hozható létre – ezzel lehetővé válik, hogy az épület felülete változatos, mégis egységes struktúrát mutasson. A koncepció egyszerű geometriai elven alapul, mégis dinamikus, modern karaktert ad a homlokzatnak. A forma célja, hogy az ismétlődés és variálhatóság egyensúlyán keresztül a homlokzat ne csak díszítő, hanem téralakító, fényt formáló elemként is működjön. :root{ --maxw: 1140px; --peek: 72px; /* mennyit lógjon be a szomszéd dia oldalanként */ --sep: 10px; /* fehér elválasztó vastagság (gap) */ --btn: 48px; /* nyíl gomb méret */ --ui-bg: rgba(255,255,255,.96); --ui-fg: #111; --ui-bd: #b9c2c9; --shadow: 0 2px 12px rgba(0,0,0,.15); --shadow-hover: 0 8px 24px rgba(0,0,0,.18); } .slider{ position: relative; max-width: var(--maxw); margin: 26px auto; padding: 0 20px; user-select: none; } .viewport{ position: relative; overflow: hidden; padding: 0 var(--peek); border-radius: 12px; background: #fff; box-shadow: var(--shadow); } .track{ display: flex; gap: var(--sep); will-change: transform; transition: transform .5s ease; } .slide{ position: relative; min-width: calc(100% - (var(--peek) * 2) - var(--sep)); height: 500px; /* ✅ fix magasság, mint a korábbi sablonban */ border-radius: 8px; overflow: hidden; filter: grayscale(.9) brightness(.85); transition: filter .25s ease, transform .2s ease, box-shadow .2s ease; box-shadow: var(--shadow); } .slide.is-active{ filter: none; } .slide:hover{ transform: translateY(-2px) scale(1.015); box-shadow: var(--shadow-hover); } .slide img{ width: 100%; height: 100%; object-fit: cover; /* ✅ kitölti a 500px magasságot */ display: block; pointer-events: none; } .counter{ position: absolute; left: calc(20px + 10px); bottom: 12px; padding: 4px 8px; font: 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #111; background: var(--ui-bg); border: 1px solid var(--ui-bd); border-radius: 8px; box-shadow: var(--shadow); z-index: 3; pointer-events: none; } .nav{ position: absolute; top: 50%; transform: translateY(-50%); width: var(--btn); height: var(--btn); display: grid; place-items: center; border: 1px solid var(--ui-bd); border-radius: 10px; background: var(--ui-bg); color: #111; cursor: pointer; box-shadow: var(--shadow); transition: transform .12s ease, background .2s ease; z-index: 4; } .nav:hover{ transform: translateY(-50%) scale(1.03); } .nav:active{ transform: translateY(-50%) scale(0.98); } .nav:focus-visible{ outline: 2px solid #005a8d; outline-offset: 2px; } .nav svg{ width: 22px; height: 22px; } .nav.prev{ left: calc(20px + 8px); } .nav.next{ right: calc(20px + 8px); } .viewport.dragging .track{ transition: none; cursor: grabbing; } @media (max-width: 520px){ :root{ --peek: 42px; --btn: 44px; --sep: 8px; } .slide{ height: 360px; } /* 📱 mobilon arányosabb magasság */ } 1 / 2 (function(){ const viewport = document.getElementById('viewport'); const track = document.getElementById('track'); const btnPrev = document.getElementById('btnPrev'); const btnNext = document.getElementById('btnNext'); const counter = document.getElementById('counter'); const reals = Array.from(track.querySelectorAll('.slide[data-real]')); const N = reals.length; const prefix = reals.map(s => s.cloneNode(true)); const suffix = reals.map(s => s.cloneNode(true)); prefix.reverse().forEach(s => track.insertBefore(s, track.firstChild)); suffix.forEach(s => track.appendChild(s)); let slides = Array.from(track.children); let index = N; let dragging = false; let startX = 0, currentX = 0; const padLeft = () => parseFloat(getComputedStyle(viewport).paddingLeft) || 0; const slideW = () => slides[N].getBoundingClientRect().width; const gap = () => parseFloat(getComputedStyle(track).gap) || 0; const stepSize = () => slideW() + gap(); const baseOffset = () => padLeft() + gap()/2; function applyTransform(noAnim=false){ if(noAnim) track.style.transition = 'none'; const offset = baseOffset() - index * stepSize(); track.style.transform = `translateX(${offset}px)`; if(noAnim) requestAnimationFrame(()=> track.style.transition = ''); } function updateActive(){ slides.forEach(el => el.classList.remove('is-active')); slides[index]?.classList.add('is-active'); const realIdx = ((index - N) % N + N) % N; counter.textContent = `${realIdx + 1} / ${N}`; } function setIndex(i, noAnim=false){ index = i; applyTransform(noAnim); updateActive(); } function next(){ if(index === 2*N - 1){ setIndex(N - 1, true); requestAnimationFrame(()=> setIndex(N, false)); } else { setIndex(index + 1); } } function prev(){ if(index === N){ setIndex(2*N, true); requestAnimationFrame(()=> setIndex(2*N - 1, false)); } else { setIndex(index - 1); } } track.addEventListener('transitionend', ()=>{ if(index >= N*2) setIndex(index - N, true); else if(index { if(e.key === 'ArrowRight') next(); if(e.key === 'ArrowLeft') prev(); }); function onStart(x){ dragging = true; startX = currentX = x; viewport.classList.add('dragging'); } function onMove(x){ if(!dragging) return; currentX = x; const dx = currentX - startX; const base = baseOffset() - index * stepSize(); track.style.transform = `translateX(${base + dx}px)`; } function onEnd(){ if(!dragging) return; dragging = false; viewport.classList.remove('dragging'); const dx = currentX - startX; const threshold = viewport.clientWidth * 0.15; if(dx > threshold) prev(); else if(dx onStart(e.clientX)); window.addEventListener('pointermove', e => onMove(e.clientX)); window.addEventListener('pointerup', onEnd); viewport.addEventListener('touchstart', e => onStart(e.touches[0].clientX), {passive:true}); viewport.addEventListener('touchmove', e => onMove(e.touches[0].clientX), {passive:true}); viewport.addEventListener('touchend', onEnd); window.addEventListener('resize', ()=> applyTransform(true)); setIndex(N, true); })();