feat: added clippath examples

limbo-works · May 21, 2024 · ea9979b · ea9979b
1 parent 159a051
commit ea9979b
Show file tree

Hide file tree

Showing 16 changed files with 418 additions and 13 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/01-clippath/index.html b/01-clippath/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Clip path - Example 01</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>
+    </header>
+
+    <div
+      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></div>
+        <span>Regular</span>
+      </div>
+
+      <div id="target-2" class="target">
+        <div></div>
+        <div></div>
+        <span>clip-path:<br />circle(50%)</span>
+      </div>
+
+      <div id="target-3" class="target">
+        <div></div>
+        <div></div>
+        <span>clip-path:<br />xywh(20% 0 80% 50%)</span>
+      </div>
+
+      <div id="target-4" class="target">
+        <div></div>
+        <div></div>
+        <span>clip-path:<br />polygon(0 0, 100% 0, 100% 100%, 0 50%)</span>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/01-clippath/scripts.js b/01-clippath/scripts.js
diff --git a/01-clippath/styles.css b/01-clippath/styles.css
@@ -0,0 +1,48 @@
+.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-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:nth-child(2) {
+  opacity: 0;
+}
+
+.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 b/02-clippath/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Clip path - Example 02</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>
+    </header>
+
+    <div
+      class="container fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex gap-[12px] p-[12px] w-[50vw]"
+    >
+      <div id="target-1" class="target"></div>
+      <div id="target-2" class="target"></div>
+      <div id="target-3" class="target"></div>
+      <div id="target-4" class="target"></div>
+    </div>
+  </body>
+</html>
diff --git a/02-clippath/scripts.js b/02-clippath/scripts.js
diff --git a/02-clippath/styles.css b/02-clippath/styles.css
@@ -0,0 +1,43 @@
+.target {
+  position: relative;
+  flex: 1;
+  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-size: cover;
+  background-position: center;
+
+  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
+  transition: 800ms cubic-bezier(0.5, 0, 0.2, 1);
+}
+
+.container::after {
+  content: "";
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--color-beige);
+  mix-blend-mode: multiply;
+  opacity: 0.1;
+}
+
+.container:hover .target {
+  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+}
+
+.target:nth-child(1) {
+  transition-delay: 0ms;
+}
+.target:nth-child(2) {
+  transition-delay: 100ms;
+}
+.target:nth-child(3) {
+  transition-delay: 200ms;
+}
+.target:nth-child(4) {
+  transition-delay: 300ms;
+}
diff --git a/03-mouse/index.html b/03-mouse/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Clip path - Example 03 (Mouse)</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="../04-clippath-mouse/index.html"></a>
+    </header>
+
+    <div class="target"></div>
+  </body>
+</html>
diff --git a/03-mouse/scripts.js b/03-mouse/scripts.js
@@ -0,0 +1,58 @@
+let xActual = 0;
+let yActual = 0;
+let xTarget = 0;
+let yTarget = 0;
+let last = 0;
+
+/**
+ * https://en.wikipedia.org/wiki/Linear_interpolation
+ */
+function lerp(v0, v1, t) {
+  return (1 - t) * v0 + t * v1;
+}
+
+/**
+ * Animation loop, see example: ...
+ */
+function animate(now) {
+  window.requestAnimationFrame(animate);
+
+  /**
+   * Calculates time, since we last updated.
+   * Delta often just means difference.
+   * 16 = ~16ms per frame, when the frame rate is 60hz.
+   */
+  const delta = (now - last) / 16;
+  last = now;
+
+  /**
+   * Interpolates xActual and yActual towards xTarget and yTarget,
+   * taking the delta value into account.
+   *
+   * See example: ...
+   */
+  xActual = lerp(xActual, xTarget, 0.1 * delta);
+  yActual = lerp(yActual, yTarget, 0.1 * delta);
+
+  /**
+   * Sets xActual and yActual as CSS variables.
+   */
+  document.body.style.setProperty("--x", xActual);
+  document.body.style.setProperty("--y", yActual);
+}
+
+/**
+ * Start the animation loop, once the content has loaded.
+ */
+document.addEventListener("DOMContentLoaded", function () {
+  animate(performance.now());
+});
+
+/**
+ * Detects changes in mouse position and saves them
+ * in the variables x and y.
+ */
+window.addEventListener("mousemove", function ({ clientX, clientY }) {
+  xTarget = clientX / window.innerWidth;
+  yTarget = clientY / window.innerHeight;
+});
diff --git a/03-mouse/styles.css b/03-mouse/styles.css
@@ -0,0 +1,26 @@
+.target {
+  position: fixed;
+  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;
+  filter: grayscale(100%);
+
+  --x-normal: calc(var(--x) * 2 - 1);
+  --y-normal: calc(var(--y) * 2 - 1);
+
+  --x-translate: calc(var(--x-normal) * 2.5vw);
+  --y-translate: calc(var(--y-normal) * 2.5vh);
+
+  transform: translate(var(--x-translate, 0), var(--y-translate, 0));
+
+  clip-path: ellipse(
+    320px 320px at calc(var(--x, 0.5) * 100% - (var(--x, 0.5) * 2 - 1) * 2.5vw)
+      calc(var(--y, 0.5) * 100% - (var(--y, 0.5) * 2 - 1) * 2.5vh)
+  );
+}
diff --git a/04-clippath-mouse/index.html b/04-clippath-mouse/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Clip path - Example 03 (Mouse)</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>
+    <div class="target"></div>
+  </body>
+</html>
diff --git a/04-clippath-mouse/scripts.js b/04-clippath-mouse/scripts.js
@@ -0,0 +1,58 @@
+let xActual = 0;
+let yActual = 0;
+let xTarget = 0;
+let yTarget = 0;
+let last = 0;
+
+/**
+ * https://en.wikipedia.org/wiki/Linear_interpolation
+ */
+function lerp(v0, v1, t) {
+  return (1 - t) * v0 + t * v1;
+}
+
+/**
+ * Animation loop, see example: ...
+ */
+function animate(now) {
+  window.requestAnimationFrame(animate);
+
+  /**
+   * Calculates time, since we last updated.
+   * Delta often just means difference.
+   * 16 = ~16ms per frame, when the frame rate is 60hz.
+   */
+  const delta = (now - last) / 16;
+  last = now;
+
+  /**
+   * Interpolates xActual and yActual towards xTarget and yTarget,
+   * taking the delta value into account.
+   *
+   * See example: ...
+   */
+  xActual = lerp(xActual, xTarget, 0.1 * delta);
+  yActual = lerp(yActual, yTarget, 0.1 * delta);
+
+  /**
+   * Sets xActual and yActual as CSS variables.
+   */
+  document.body.style.setProperty("--x", xActual);
+  document.body.style.setProperty("--y", yActual);
+}
+
+/**
+ * Start the animation loop, once the content has loaded.
+ */
+document.addEventListener("DOMContentLoaded", function () {
+  animate(performance.now());
+});
+
+/**
+ * Detects changes in mouse position and saves them
+ * in the variables x and y.
+ */
+window.addEventListener("mousemove", function ({ clientX, clientY }) {
+  xTarget = clientX / window.innerWidth;
+  yTarget = clientY / window.innerHeight;
+});
diff --git a/04-clippath-mouse/styles.css b/04-clippath-mouse/styles.css
@@ -0,0 +1,26 @@
+.target {
+  position: fixed;
+  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;
+  filter: grayscale(100%);
+
+  --x-normal: calc(var(--x) * 2 - 1);
+  --y-normal: calc(var(--y) * 2 - 1);
+
+  --x-translate: calc(var(--x-normal) * 2.5vw);
+  --y-translate: calc(var(--y-normal) * 2.5vh);
+
+  transform: translate(var(--x-translate, 0), var(--y-translate, 0));
+
+  clip-path: ellipse(
+    320px 320px at calc(var(--x, 0.5) * 100% - (var(--x, 0.5) * 2 - 1) * 2.5vw)
+      calc(var(--y, 0.5) * 100% - (var(--y, 0.5) * 2 - 1) * 2.5vh)
+  );
+}
diff --git a/logo.svg b/logo.svg
diff --git a/next.svg b/next.svg