chore: cleaning

limbo-works · May 22, 2024 · 4f55a5b · 4f55a5b
1 parent 5e9594f
commit 4f55a5b
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 47 deletions.
diff --git a/0-1-intro/index.html b/0-1-intro/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>1.1: Clip Path</title>
+    <title>0.1: Intro</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="../overall.css" />
     <link rel="stylesheet" href="styles.css" />

diff --git a/1-1-clippath/index.html b/1-1-clippath/index.html
@@ -16,25 +16,25 @@
       class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex gap-[64px]"
     >
       <div id="target-1" class="target">
-        <div></div>
+        <div class="inner"></div>
         <div></div>
         <span>Regular</span>
       </div>
 
       <div id="target-2" class="target">
-        <div></div>
+        <div class="inner"></div>
         <div></div>
         <span>clip-path:<br />circle(50%)</span>
       </div>
 
       <div id="target-3" class="target">
-        <div></div>
+        <div class="inner"></div>
         <div></div>
         <span>clip-path:<br />xywh(20% 10% 70% 50%)</span>
       </div>
 
       <div id="target-4" class="target">
-        <div></div>
+        <div class="inner"></div>
         <div></div>
         <span>clip-path:<br />polygon(0 0, 100% 0, 100% 100%, 0 50%)</span>
       </div>

diff --git a/1-1-clippath/styles.css b/1-1-clippath/styles.css
@@ -10,22 +10,21 @@
   background-position: center;
 }
 
-#target-2 > div:first-child {
+#target-2 .inner {
   clip-path: circle(50%);
 }
 
-#target-3 > div:first-child {
+#target-3 .inner {
   clip-path: xywh(20% 10% 70% 50%);
 }
 
-#target-4 > div:first-child {
+#target-4 .inner {
   clip-path: polygon(0 0, 100% 0, 100% 100%, 0 50%);
 }
 
 /**
 Ignore everything below this line.
 **/
-
 .target {
   position: relative;
   width: 240px;

diff --git a/4-1-mouse/scripts.js b/4-1-mouse/scripts.js
@@ -1,6 +1,9 @@
 /**
  * Detects changes in mouse position and saves them
- * in as css variables.
+ * in as css variables. To read more about css variables,
+ * please see the link below.
+ *
+ * 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");

diff --git a/4-1-mouse/styles.css b/4-1-mouse/styles.css
@@ -7,5 +7,13 @@
   border-radius: 32px;
   background-color: var(--color-beige);
 
+  /**
+    Moves the element to the cursor position,
+    using the css variables we set through the
+    script file.
+  */
+
   transform: translate(calc(var(--x) - 50%), calc(var(--y) - 50%));
+
+  /* transform: translate(var(--x), var(--y)); */
 }
diff --git a/4-2-animation-basics/ignore.js b/4-2-animation-basics/ignore.js
@@ -4,40 +4,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;
-}
-
+/**
+ * JavaScript implementation of cubic bezier easing function.
+ *
+ * @param {Number} x0
+ * @param {Number} y0
+ * @param {Number} x1
+ * @param {Number} y1
+ * @param {Object} options
+ * @returns
+ */
 function cubicBezier(x0, y0, x1, y1, options) {
   const precision = options?.precision ?? 256;
   const maxIterations = options?.maxIterations ?? 32;
@@ -87,3 +63,47 @@ function cubicBezier(x0, y0, x1, y1, options) {
     return (y1 - y0) * percentage + y0;
   };
 }
+
+/**
+ * Animation loop.
+ */
+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);
+}
+
+/**
+ * Run setup once the document is loaded.
+ */
+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)));
+  }
+});
+
+/**
+ * This runs when the user changes the input value,
+ * on the range input.
+ */
+function updateModifier() {
+  const el = document.querySelector("input");
+  modifier = +el.value;
+}
diff --git a/4-4-interpolation/scripts.js b/4-4-interpolation/scripts.js
@@ -14,7 +14,7 @@ function updateModifier() {
   const target = document.querySelector(".target");
 
   /**
-   * Runs the lerp function multiple times,
+   * Runs the interpolate function multiple times,
    * based on how much the user has pulled the
    * range input. Getting one percent closer to
    * the goal each time.

diff --git a/overall.css b/overall.css
@@ -37,9 +37,11 @@ body > header > div {
 
 body > header > a {
   margin-top: 8px;
-  width: 30px;
-  aspect-ratio: 30 / 26;
+  width: 132px;
+  aspect-ratio: 132 / 26;
   background-image: url(./next.svg);
+  background-position: right;
+  background-repeat: no-repeat;
 }
 
 .logo-visible path {