113 lines
2.7 KiB
HTML
113 lines
2.7 KiB
HTML
<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>
|