feat: all the changes

limbo-works · May 21, 2024 · 5d91df1 · 5d91df1
1 parent cbe2c01
commit 5d91df1
Show file tree

Hide file tree

Showing 25 changed files with 490 additions and 173 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/04-clippath-mouse/styles.css b/04-clippath-mouse/styles.css
diff --git a/01-clippath/index.html → 1-1-clippath/index.html b/01-clippath/index.html → 1-1-clippath/index.html
@@ -1,16 +1,15 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Clip path - Example 01</title>
+    <title>1.1: Clip Path</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="../overall.css" />
     <link rel="stylesheet" href="styles.css" />
-    <script src="scripts.js"></script>
   </head>
   <body>
     <header>
       <div></div>
-      <a href="../02-clippath/index.html"></a>
+      <a href="../1-2-clippath/index.html"></a>
     </header>
 
     <div
@@ -31,7 +30,7 @@
       <div id="target-3" class="target">
         <div></div>
         <div></div>
-        <span>clip-path:<br />xywh(20% 0 80% 50%)</span>
+        <span>clip-path:<br />xywh(20% 10% 70% 50%)</span>
       </div>
 
       <div id="target-4" class="target">

diff --git a/01-clippath/styles.css → 1-1-clippath/styles.css b/01-clippath/styles.css → 1-1-clippath/styles.css
@@ -1,22 +1,37 @@
-.target {
-  position: relative;
-  width: 240px;
-  height: 240px;
-}
-
 .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-image: url(https://images.unsplash.com/photo-1715787803917-d25f112866fe?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
   background-size: cover;
   background-position: center;
 }
 
+#target-2 > div:first-child {
+  clip-path: circle(50%);
+}
+
+#target-3 > div:first-child {
+  clip-path: xywh(20% 10% 70% 50%);
+}
+
+#target-4 > div:first-child {
+  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 50%);
+}
+
+/**
+Ignore everything below this line.
+**/
+
+.target {
+  position: relative;
+  width: 240px;
+  height: 240px;
+}
+
 .target > span {
   position: absolute;
   top: -64px;
@@ -34,15 +49,3 @@
 .target:hover > div:nth-child(2) {
   opacity: 0.5;
 }
-
-#target-2 > div:first-child {
-  clip-path: circle(50%);
-}
-
-#target-3 > div:first-child {
-  clip-path: xywh(20% 0 80% 50%);
-}
-
-#target-4 > div:first-child {
-  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 50%);
-}
diff --git a/02-clippath/index.html → 1-2-clippath/index.html b/02-clippath/index.html → 1-2-clippath/index.html
@@ -1,16 +1,15 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Clip path - Example 02</title>
+    <title>1.2: Clip Path Transition</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="../overall.css" />
     <link rel="stylesheet" href="styles.css" />
-    <script src="scripts.js"></script>
   </head>
   <body>
     <header>
       <div></div>
-      <a href="../03-mouse/index.html"></a>
+      <a href="../2-1-mouse/index.html"></a>
     </header>
 
     <div

diff --git a/02-clippath/styles.css → 1-2-clippath/styles.css b/02-clippath/styles.css → 1-2-clippath/styles.css
@@ -4,7 +4,7 @@
   aspect-ratio: 3 / 4;
 
   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-image: url(https://images.unsplash.com/photo-1715787803917-d25f112866fe?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
   background-size: cover;
   background-position: center;
 

diff --git a/03-mouse/index.html → 2-1-mouse/index.html b/03-mouse/index.html → 2-1-mouse/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Clip path - Example 03 (Mouse)</title>
+    <title>2.1: Mouse</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="../overall.css" />
     <link rel="stylesheet" href="styles.css" />
@@ -10,7 +10,7 @@
   <body>
     <header>
       <div></div>
-      <a href="../04-clippath-mouse/index.html"></a>
+      <a href="../2-2-animation-basics/index.html"></a>
     </header>
 
     <div class="target"></div>

diff --git a/03-mouse/scripts.js → 2-1-mouse/scripts.js b/03-mouse/scripts.js → 2-1-mouse/scripts.js
diff --git a/03-mouse/styles.css → 2-1-mouse/styles.css b/03-mouse/styles.css → 2-1-mouse/styles.css
diff --git a/2-2-animation-basics/ignore.css b/2-2-animation-basics/ignore.css
@@ -0,0 +1,25 @@
+/**
+Ignore everything beyound this line.
+*/
+.example {
+  position: absolute;
+  top: 0px;
+  left: calc(var(--p) * 100%);
+  transform: translateX(calc(var(--p) * -100%));
+
+  height: 100%;
+  aspect-ratio: 1;
+  border-radius: 9999px;
+  border: 1px solid var(--color-beige);
+}
+
+.example-steps {
+  position: absolute;
+  height: 100%;
+  aspect-ratio: 1;
+  border-radius: 9999px;
+  background-color: var(--color-beige);
+
+  left: calc(100% * var(--step));
+  transform: translateX(calc(-100% * var(--step)));
+}
diff --git a/2-2-animation-basics/ignore.js b/2-2-animation-basics/ignore.js
@@ -0,0 +1,89 @@
+let modifier = 16;
+
+let lastTime = 0;
+let step = 0;
+let counter = 0;
+
+function animate() {
+  window.requestAnimationFrame(animate);
+
+  const now = performance.now();
+  const delta = now - lastTime;
+  lastTime = now;
+  counter += 0.001 * delta;
+
+  const bezier = cubicBezier(0.4, 0, 0.6, 1);
+
+  step = Math.round(counter * modifier * 0.5) % modifier;
+  step = Math.abs(step - modifier * 0.5);
+  step = bezier(step / (modifier * 0.5));
+
+  console.log(step);
+  document.body.style.setProperty("--step", step);
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+  animate(performance.now());
+
+  const bezier = cubicBezier(0.4, 0, 0.6, 1);
+  const elements = document.getElementsByClassName("example");
+
+  for (let i = 0; i < elements.length; i++) {
+    elements[i].style.setProperty("--p", bezier(i / (elements.length - 1)));
+  }
+});
+
+function updateModifier() {
+  const el = document.querySelector("input");
+  modifier = +el.value;
+}
+
+function cubicBezier(x0, y0, x1, y1, options) {
+  const precision = options?.precision ?? 256;
+  const maxIterations = options?.maxIterations ?? 32;
+  const maxErrorMargin = options?.maxErrorMargin ?? 1 / 10 ** 8;
+
+  const getBezierFunction = (p1, p2, t) => {
+    const a0 = 3 * t * (1 - t) ** 2 * p1;
+    const a1 = 3 * (1 - t) * t ** 2 * p2;
+    return a0 + a1 + t ** 3;
+  };
+
+  const sampleX = (u) => getBezierFunction(x0, x1, u);
+  const sampleY = (u) => getBezierFunction(y0, y1, u);
+  const steps = new Array(precision + 1);
+
+  for (let index = 0; index <= precision; index++) {
+    let x0 = index / precision - 1 / 10 ** 3;
+    let x1 = index / precision + 1 / 10 ** 3;
+    let x2 = 0;
+
+    for (let iteration = 0; iteration < maxIterations; iteration++) {
+      const ox0 = sampleX(x0) - index / precision;
+      const ox1 = sampleX(x1) - index / precision;
+
+      x2 = (x0 * ox1 - x1 * ox0) / (ox1 - ox0);
+      x0 = x1;
+      x1 = x2;
+
+      if (Math.abs(sampleX(x2) - index / precision) < maxErrorMargin) {
+        break;
+      }
+    }
+
+    steps[index] = sampleY(x2);
+  }
+
+  return (x) => {
+    const upper = Math.floor(x * precision);
+    const lower = Math.ceil(x * precision);
+
+    const x0 = upper / precision ?? 0;
+    const x1 = lower / precision ?? 1;
+    const y0 = steps[upper] ?? 0;
+    const y1 = steps[lower] ?? 1;
+
+    const percentage = (x - x0) / (x1 - x0) || 0;
+    return (y1 - y0) * percentage + y0;
+  };
+}
diff --git a/2-2-animation-basics/index.html b/2-2-animation-basics/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>2.2: Animation Basics</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="../overall.css" />
+    <link rel="stylesheet" href="ignore.css" />
+    <script src="ignore.js"></script>
+    <script src="scripts.js"></script>
+  </head>
+  <body>
+    <header>
+      <div></div>
+      <a href="../2-3-loop/index.html"></a>
+    </header>
+
+    <div
+      class="container fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col gap-[64px] w-[50vw]"
+    >
+      <div class="relative w-full h-[96px]">
+        <div class="example"></div>
+        <div class="example"></div>
+        <div class="example"></div>
+        <div class="example"></div>
+        <div class="example"></div>
+        <div class="example"></div>
+        <div class="example"></div>
+        <div class="example"></div>
+        <div class="example"></div>
+      </div>
+
+      <div class="relative w-full h-[96px]">
+        <div class="example-steps"></div>
+      </div>
+
+      <input
+        id="range"
+        type="range"
+        min="18"
+        step="1"
+        value="18"
+        max="120"
+        oninput="updateModifier()"
+        class="w-[200px] mx-auto"
+      />
+    </div>
+  </body>
+</html>
diff --git a/01-clippath/scripts.js → 2-3-loop/ignore.css b/01-clippath/scripts.js → 2-3-loop/ignore.css
diff --git a/02-clippath/scripts.js → 2-3-loop/ignore.js b/02-clippath/scripts.js → 2-3-loop/ignore.js
diff --git a/2-3-loop/index.html b/2-3-loop/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>2.3: Animation Loops</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="../overall.css" />
+    <link rel="stylesheet" href="ignore.css" />
+    <script src="ignore.js"></script>
+    <script src="scripts.js"></script>
+  </head>
+  <body>
+    <header>
+      <div></div>
+      <a href="../2-4-interpolation/index.html"></a>
+    </header>
+  </body>
+</html>
diff --git a/2-4-interpolation/index.html b/2-4-interpolation/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>2.4: Interpolation</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="../overall.css" />
+    <link rel="stylesheet" href="styles.css" />
+    <script src="scripts.js"></script>
+  </head>
+  <body>
+    <header>
+      <div></div>
+      <a href="../2-5-clippath-mouse/index.html"></a>
+    </header>
+
+    <div
+      class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col gap-32 w-[50vw]"
+    >
+      <div class="timeline">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+
+      <div class="target">
+        <div></div>
+      </div>
+
+      <input
+        id="range"
+        type="range"
+        min="0"
+        step="1"
+        value="0"
+        max="400"
+        oninput="updateModifier()"
+        class="w-[200px] mx-auto"
+      />
+    </div>
+  </body>
+</html>