Kósa Lili - Egyveleg

Koncepció Természetből kiinduló geometrizálás. Két fő elem kombinációjából kialakított elemrendszer, mely szabályos és szabálytalan formában sorolható. Elemek között az egymásra épülő ívek képezik a kapcsolatot. A sorolás folyamatosan bővíthető, vagy befejezhető, a szabad sorolásnak köszönhetően az elrendezés személyre szabható. Pozitív–negatív elemek használata. :root{ --maxw: clamp(400px, 95vw, 1800px); --peek: clamp(32px, 8vw, 120px); --sep: clamp(6px, 1.4vw, 16px); --btn: clamp(42px, 4.5vw, 64px); --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; /* desktop */ border-radius: 10px; 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; 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: var(--ui-fg); 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: clamp(16px, 8vw, 42px); --sep: clamp(6px, 1.8vw, 10px); } .slide{ height: 360px; } /* mobil */ } @media (prefers-reduced-motion: reduce){ .track{ transition: none !important; } .slide{ transition: none !important; } } 1 / 6 (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; // végtelenítés 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; // első valódi dia 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(); }); // húzás / swipe 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)); // start setIndex(N, true); })();