Init

2024-08-20 08:13:30 +10:00 · 2024-08-20 08:13:30 +10:00 · 7eca6892db
commit 7eca6892db
3 changed files with 173 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -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)
--- a/scrolling.html
+++ b/scrolling.html
@ -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>
--- a/tiling.html
+++ b/tiling.html
@ -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>