pfych/experiments
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Init

Browse Source
This commit is contained in:
pfych 2024-08-20 08:13:30 +10:00
commit 7eca6892db
3 changed files with 173 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
README.md Normal file
View File

@ -0,0 +1,12 @@
---
title: Experiments
---
# Experiments
Small micro-projects that fit into a single HTML file. Used to experiment and mess around with native web features.
## List
- [Animated background grid](./tiling.html)
- [Swipeable scrolling](./scrolling.html)

112
scrolling.html Normal file
View File

@ -0,0 +1,112 @@
<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>

49
tiling.html Normal file
View File

@ -0,0 +1,49 @@
<html>
<head>
<title>Tiling</title>
</head>
<body>
</body>
<style>
@property --offset {
syntax: '<length>';
inherits: false;
initial-value: 0px;
}
@keyframes shift {
0% {
--offset: 0px;
}
100% {
--offset: 100px;
}
}
body,
html {
height: 100vh;
width: 100vw;
padding: unset;
margin: unset;
}
body {
--offset: 0px;
--size: 20px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'>\
<rect fill='%2391eae4' x='0' y='0' width='20px' height='20px'/>\
<rect fill='%2386a8e7' x='0' y='20' width='20px' height='20px'/>\
<rect fill='%2391eae4' x='20' y='20' width='20px' height='20px'/>\
<rect fill='%2386a8e7' x='20' y='0' width='20px' height='20px'/>\
</svg>");
animation: shift 5s infinite linear;
background-position-x: var(--offset);
background-position-y: var(--offset);
}
</style>