feat: stuffs

limbo-works · Jan 27, 2025 · 9d7b050 · 9d7b050
1 parent 76163e9
commit 9d7b050
Show file tree

Hide file tree

Showing 44 changed files with 144 additions and 66 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/3-1-css-filters/index.html → 2-1-css-filters/index.html b/3-1-css-filters/index.html → 2-1-css-filters/index.html
diff --git a/2-1-css-filters/styles.css b/2-1-css-filters/styles.css
@@ -0,0 +1,62 @@
+.target {
+  position: relative;
+  width: 200px;
+  height: 200px;
+  transition: 1s filter linear, 1s -webkit-filter linear;
+}
+
+.target > div {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  background-color: var(--color-beige);
+  background-image: url(https://images.unsplash.com/photo-1716125583397-e7cc7469c3f2?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
+  background-size: cover;
+  background-position: center;
+}
+
+.target > span {
+  position: absolute;
+  top: -64px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: max-content;
+  font-size: 12px;
+  text-align: center;
+}
+
+.target > div {
+  transition: 1s filter linear, 1s -webkit-filter linear;
+}
+
+#target-2 > div {
+  transition: 0.5s filter ease-in-out;
+  filter: hue-rotate(0deg);
+}
+#target-2:hover > div {
+  filter: hue-rotate(90deg);
+}
+#target-3 > div {
+  transition: 0.5s filter ease-in-out;
+  filter: contrast(100%);
+}
+#target-3:hover > div {
+  filter: contrast(175%);
+}
+#target-4 > div {
+  transition: 0.5s filter ease-in-out;
+  filter: brightness(100%);
+}
+#target-4:hover > div {
+  filter: brightness(75%);
+}
+#target-5 > div {
+  transition: 0.5s filter ease-in-out;
+  filter: blur(0);
+}
+#target-5:hover > div {
+  filter: blur(3px);
+}
diff --git a/3-1-css-filters/styles.css b/3-1-css-filters/styles.css
diff --git a/3-1-keyframes-hover/index.html b/3-1-keyframes-hover/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>3.1: CSS Filters</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="../overall.css" />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <div></div>
+      <a href="../4-1-mouse/index.html"></a>
+    </header>
+
+    <div><!-- Content here --></div>
+  </body>
+</html>
diff --git a/4-3-loop-live/styles.css → 3-1-keyframes-hover/styles.css b/4-3-loop-live/styles.css → 3-1-keyframes-hover/styles.css
diff --git a/4-1-svg-masks/index.html b/4-1-svg-masks/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>3.1: CSS Filters</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="../overall.css" />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <div></div>
+      <a href="../4-1-mouse/index.html"></a>
+    </header>
+
+    <div><!-- Content here --></div>
+  </body>
+</html>
diff --git a/4-5-loop-interpolation-live/styles.css → 4-1-svg-masks/styles.css b/4-5-loop-interpolation-live/styles.css → 4-1-svg-masks/styles.css
diff --git a/2-1-svg-stroke/index.html → 6-1-svg-stroke/index.html b/2-1-svg-stroke/index.html → 6-1-svg-stroke/index.html
diff --git a/2-1-svg-stroke/scripts.js → 6-1-svg-stroke/scripts.js b/2-1-svg-stroke/scripts.js → 6-1-svg-stroke/scripts.js
diff --git a/2-1-svg-stroke/styles.css → 6-1-svg-stroke/styles.css b/2-1-svg-stroke/styles.css → 6-1-svg-stroke/styles.css
diff --git a/2-2-svg-stroke/index.html → 6-2-svg-stroke/index.html b/2-2-svg-stroke/index.html → 6-2-svg-stroke/index.html
diff --git a/2-2-svg-stroke/scripts.js → 6-2-svg-stroke/scripts.js b/2-2-svg-stroke/scripts.js → 6-2-svg-stroke/scripts.js
diff --git a/2-2-svg-stroke/styles.css → 6-2-svg-stroke/styles.css b/2-2-svg-stroke/styles.css → 6-2-svg-stroke/styles.css
diff --git a/2-3-svg-stroke/index.html → 6-3-svg-stroke/index.html b/2-3-svg-stroke/index.html → 6-3-svg-stroke/index.html
diff --git a/2-3-svg-stroke/scripts.js → 6-3-svg-stroke/scripts.js b/2-3-svg-stroke/scripts.js → 6-3-svg-stroke/scripts.js
diff --git a/2-3-svg-stroke/styles.css → 6-3-svg-stroke/styles.css b/2-3-svg-stroke/styles.css → 6-3-svg-stroke/styles.css
diff --git a/2-4-svg-stroke-demo/index.html → 6-4-svg-stroke-demo/index.html b/2-4-svg-stroke-demo/index.html → 6-4-svg-stroke-demo/index.html
diff --git a/2-4-svg-stroke-demo/scripts.js → 6-4-svg-stroke-demo/scripts.js b/2-4-svg-stroke-demo/scripts.js → 6-4-svg-stroke-demo/scripts.js
diff --git a/2-4-svg-stroke-demo/styles.css → 6-4-svg-stroke-demo/styles.css b/2-4-svg-stroke-demo/styles.css → 6-4-svg-stroke-demo/styles.css
diff --git a/4-1-mouse/index.html → 7-1-cssvariables-mouse/index.html b/4-1-mouse/index.html → 7-1-cssvariables-mouse/index.html
diff --git a/4-1-mouse/scripts.js → 7-1-cssvariables-mouse/scripts.js b/4-1-mouse/scripts.js → 7-1-cssvariables-mouse/scripts.js
@@ -5,7 +5,7 @@
  *
  * https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
  */
-window.addEventListener("mousemove", function ({ clientX, clientY }) {
-  document.body.style.setProperty("--x", clientX + "px");
-  document.body.style.setProperty("--y", clientY + "px");
+window.addEventListener("mousemove", function (event) {
+  document.body.style.setProperty("--x", event.clientX + "px");
+  document.body.style.setProperty("--y", event.clientY + "px");
 });
diff --git a/4-1-mouse/styles.css → 7-1-cssvariables-mouse/styles.css b/4-1-mouse/styles.css → 7-1-cssvariables-mouse/styles.css
diff --git a/8-1-split-text/index.html b/8-1-split-text/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>3.1: CSS Filters</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="../overall.css" />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <div></div>
+      <a href="../4-1-mouse/index.html"></a>
+    </header>
+
+    <div><!-- Content here --></div>
+  </body>
+</html>
diff --git a/8-1-split-text/styles.css b/8-1-split-text/styles.css
diff --git a/9-1-css-perspective/index.html b/9-1-css-perspective/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>3.1: CSS Filters</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="../overall.css" />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <div></div>
+      <a href="../4-1-mouse/index.html"></a>
+    </header>
+
+    <div><!-- Content here --></div>
+  </body>
+</html>
diff --git a/9-1-css-perspective/styles.css b/9-1-css-perspective/styles.css
diff --git a/README.md b/README.md
@@ -1 +1 @@
-# hack-your-future-workshop
+# Hack Your Future
diff --git a/plan.md b/plan.md
@@ -0,0 +1,10 @@
+- Intro (Aske)
+- Clippath (Aske)
+- Css Filters (Tobi) \*TOBI
+- Keyframes + Hover things (+ things from iuno workshop) (Tobi) \*WØLK+TOBI
+- Svg Masks (Aske) \*ASKE
+- Svg Filters (Aske) \*ASKE
+- Svg Stroke (Tobi) \*TOBI
+- Simple JS css-variables + follow (Tobi) \*TOBI
+- Split Text Animation (Tobi) \*TOBI+WØLK
+- Css Perspective & 3d transforms + skew, if you're craazy (Aske) \*ASKE
diff --git a/4-2-animation-basics/ignore.css → x-4-2-animation-basics/ignore.css b/4-2-animation-basics/ignore.css → x-4-2-animation-basics/ignore.css
diff --git a/4-2-animation-basics/ignore.js → x-4-2-animation-basics/ignore.js b/4-2-animation-basics/ignore.js → x-4-2-animation-basics/ignore.js
diff --git a/4-2-animation-basics/index.html → x-4-2-animation-basics/index.html b/4-2-animation-basics/index.html → x-4-2-animation-basics/index.html
diff --git a/4-3-loop-live/index.html → x-4-3-loop-live/index.html b/4-3-loop-live/index.html → x-4-3-loop-live/index.html
diff --git a/4-3-loop-live/scripts.js → x-4-3-loop-live/scripts.js b/4-3-loop-live/scripts.js → x-4-3-loop-live/scripts.js
diff --git a/x-4-3-loop-live/styles.css b/x-4-3-loop-live/styles.css
diff --git a/4-4-interpolation/index.html → x-4-4-interpolation/index.html b/4-4-interpolation/index.html → x-4-4-interpolation/index.html
diff --git a/4-4-interpolation/scripts.js → x-4-4-interpolation/scripts.js b/4-4-interpolation/scripts.js → x-4-4-interpolation/scripts.js
diff --git a/4-4-interpolation/styles.css → x-4-4-interpolation/styles.css b/4-4-interpolation/styles.css → x-4-4-interpolation/styles.css
diff --git a/4-5-loop-interpolation-live/index.html → x-4-5-loop-interpolation-live/index.html b/4-5-loop-interpolation-live/index.html → x-4-5-loop-interpolation-live/index.html
diff --git a/4-5-loop-interpolation-live/scripts.js → x-4-5-loop-interpolation-live/scripts.js b/4-5-loop-interpolation-live/scripts.js → x-4-5-loop-interpolation-live/scripts.js
diff --git a/x-4-5-loop-interpolation-live/styles.css b/x-4-5-loop-interpolation-live/styles.css
diff --git a/4-6-clippath-mouse/index.html → x-4-6-clippath-mouse/index.html b/4-6-clippath-mouse/index.html → x-4-6-clippath-mouse/index.html
diff --git a/4-6-clippath-mouse/scripts.js → x-4-6-clippath-mouse/scripts.js b/4-6-clippath-mouse/scripts.js → x-4-6-clippath-mouse/scripts.js
diff --git a/4-6-clippath-mouse/styles.css → x-4-6-clippath-mouse/styles.css b/4-6-clippath-mouse/styles.css → x-4-6-clippath-mouse/styles.css