Mirror of static site repo git.pfy.ch/pfych/static
Something went wrong. Try again.
2.7 kB · 112 lines
HTML
at rewrite
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113<html> <body> <div class="screens"> <div class="screen"> <h1>Card one</h1> </div> <div class="screen"> <h1>Card Two</h1> </div> <div class="screen"> <h1>Card Three</h1> </div> <div class="screen"> <h1>Card Four</h1> </div> <div class="screen"> <h1>Card Five</h1> </div> <div class="screen"> <h1>Card Six</h1> </div> </div> </body> <script> const screens = [...(document.getElementsByClassName("screen") || [])]; const limit = (screens.length - 1) / 2; let index = limit * -1; document.body.style.setProperty("--active-index", index);
let downLocation = undefined; // Gets set to [X,Y] after mousedown document.addEventListener("mousedown", (event) => { downLocation = [event.clientX, event.clientY]; });
document.addEventListener("mousemove", (event) => { if (downLocation) { const offset = downLocation[0] - event.clientX; document.body.style.setProperty("--offset", `${offset}px`); } });
document.addEventListener("mouseup", (event) => { const xDiff = downLocation[0] - event.clientX;
if (xDiff > 100) { if (index < limit) { index += 1; } } else if (xDiff < -100) { if (index > limit * -1) { index -= 1; } }
screens.forEach((screen) => { const animationTime = 250; screen.style.setProperty( "transition", `transform ${animationTime}ms ease-in-out`, );
setTimeout(() => { screen.style.removeProperty("transition"); }, animationTime); });
document.body.style.setProperty("--active-index", `${index}`); document.body.style.setProperty("--offset", "0px"); downLocation = undefined; }); </script> <style> body { --screen-width: min(500px, 90%); --screen-gap: min(100px, 5%); --active-index: 0; --offset: 0px; }
body { margin: unset; overflow: hidden; }
.screens { display: flex; flex-wrap: nowrap; gap: var(--screen-gap); width: 100vw; height: 100vh; padding: 8px; box-sizing: border-box; justify-content: center; }
.screen { flex: 0 0 var(--screen-width); width: var(--screen-width); height: 100%; transform: translateX( calc( (((100% + var(--screen-gap)) * var(--active-index)) * -1) - var(--offset) ) ); border: 1px solid #000; padding: 8px 16px; box-sizing: border-box; overflow: auto; } </style></html>