From ea9979b3de8720ce93623dbbd1a28cba39c98cd7 Mon Sep 17 00:00:00 2001 From: Aske Lange <44546482+AskeLange@users.noreply.github.com> Date: Tue, 21 May 2024 13:47:08 +0200 Subject: [PATCH] feat: added clippath examples --- .DS_Store | Bin 0 -> 6148 bytes 01-clippath/index.html | 44 ++++++++++++++++++++++++++ 01-clippath/scripts.js | 0 01-clippath/styles.css | 48 +++++++++++++++++++++++++++++ 02-clippath/index.html | 25 +++++++++++++++ 02-clippath/scripts.js | 0 02-clippath/styles.css | 43 ++++++++++++++++++++++++++ 03-mouse/index.html | 18 +++++++++++ 03-mouse/scripts.js | 58 +++++++++++++++++++++++++++++++++++ 03-mouse/styles.css | 26 ++++++++++++++++ 04-clippath-mouse/index.html | 13 ++++++++ 04-clippath-mouse/scripts.js | 58 +++++++++++++++++++++++++++++++++++ 04-clippath-mouse/styles.css | 26 ++++++++++++++++ logo.svg | 16 ++++++++++ next.svg | 3 ++ overall.css | 53 ++++++++++++++++++++++++-------- 16 files changed, 418 insertions(+), 13 deletions(-) create mode 100644 .DS_Store create mode 100644 01-clippath/index.html create mode 100644 01-clippath/scripts.js create mode 100644 01-clippath/styles.css create mode 100644 02-clippath/index.html create mode 100644 02-clippath/scripts.js create mode 100644 02-clippath/styles.css create mode 100644 03-mouse/index.html create mode 100644 03-mouse/scripts.js create mode 100644 03-mouse/styles.css create mode 100644 04-clippath-mouse/index.html create mode 100644 04-clippath-mouse/scripts.js create mode 100644 04-clippath-mouse/styles.css create mode 100644 logo.svg create mode 100644 next.svg diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..ba340012d529f8825e33a4ea30d691978fb53493 GIT binary patch literal 6148 zcmeHK!A`w44Yoq0v346Mav&tV>ks)OevdP| zTM_~uyqG96&Fq`qnc2;}HoIK_5bbfV4p0FA3zaZe!e)h#pL9ubW`t0vIb!f2fdL!> z&du@%7@&8z1&Rm}0`kC$d*Fk^Mt?Zo3DDi@*KU4`pua6;jH$l{sleQd3y^+dwwZke|rEX<^ zI&HL?&8mG;ug|LXwAHAgeSA8bm8{)^qqEEIbNCX;H%+j>k59?A!3^HfSXtbwJB&gZ zJ)u9#&2ku-0cL<1SOW&k)@PO1pjIxC8DIu}#sKXPHY%ZGFx9BG4s7W6k^BWh613?q zL1-Iv45k{!9=^)g~IFDIbm>Y^vtK+z>!a+D1xn%~J zfkg)Lx?7?1|Kj`m|6&sNm;q+sUojvG9kpQjBaWc(kAR|q8)o2F8TbN|-b| + + + Clip path - Example 01 + + + + + + +
+
+ +
+ +
+
+
+
+ Regular +
+ +
+
+
+ clip-path:
circle(50%) +
+ +
+
+
+ clip-path:
xywh(20% 0 80% 50%) +
+ +
+
+
+ clip-path:
polygon(0 0, 100% 0, 100% 100%, 0 50%) +
+
+ + diff --git a/01-clippath/scripts.js b/01-clippath/scripts.js new file mode 100644 index 0000000..e69de29 diff --git a/01-clippath/styles.css b/01-clippath/styles.css new file mode 100644 index 0000000..a254448 --- /dev/null +++ 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 new file mode 100644 index 0000000..15bad21 --- /dev/null +++ b/02-clippath/index.html @@ -0,0 +1,25 @@ + + + + Clip path - Example 02 + + + + + + +
+
+ +
+ +
+
+
+
+
+
+ + diff --git a/02-clippath/scripts.js b/02-clippath/scripts.js new file mode 100644 index 0000000..e69de29 diff --git a/02-clippath/styles.css b/02-clippath/styles.css new file mode 100644 index 0000000..9ff0c9f --- /dev/null +++ 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 new file mode 100644 index 0000000..0089e67 --- /dev/null +++ b/03-mouse/index.html @@ -0,0 +1,18 @@ + + + + Clip path - Example 03 (Mouse) + + + + + + +
+
+ +
+ +
+ + diff --git a/03-mouse/scripts.js b/03-mouse/scripts.js new file mode 100644 index 0000000..60d9b93 --- /dev/null +++ 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 new file mode 100644 index 0000000..ce95703 --- /dev/null +++ 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 new file mode 100644 index 0000000..2fa3c22 --- /dev/null +++ b/04-clippath-mouse/index.html @@ -0,0 +1,13 @@ + + + + Clip path - Example 03 (Mouse) + + + + + + +
+ + diff --git a/04-clippath-mouse/scripts.js b/04-clippath-mouse/scripts.js new file mode 100644 index 0000000..60d9b93 --- /dev/null +++ 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 new file mode 100644 index 0000000..ce95703 --- /dev/null +++ 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 new file mode 100644 index 0000000..525753a --- /dev/null +++ b/logo.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/next.svg b/next.svg new file mode 100644 index 0000000..7846240 --- /dev/null +++ b/next.svg @@ -0,0 +1,3 @@ + + + diff --git a/overall.css b/overall.css index cf819f0..c308e31 100644 --- a/overall.css +++ b/overall.css @@ -1,25 +1,52 @@ @font-face { - font-family: "Moderat"; - font-style: normal; - font-weight: 400; - src: url("moderat.woff2") format("woff2"); + font-family: "Moderat"; + font-style: normal; + font-weight: 400; + src: url("moderat.woff2") format("woff2"); } :root { - --color-blue: #1e1f9f; - --color-beige: #f2cecf; + --color-blue: #1e1f9f; + --color-beige: #f2cecf; } body { - background: hsl(192, 37%, 60%); - background: var(--color-blue); - font-family: "Moderat", sans-serif; - color: var(--color-beige); - padding: 0 50px; + background: hsl(192, 37%, 60%); + background: var(--color-blue); + font-family: "Moderat", sans-serif; + color: var(--color-beige); + padding: 0 50px; } + +body > header { + position: fixed; + top: 32px; + left: 48px; + z-index: 50; + width: calc(100% - 96px); + + display: flex; + justify-content: space-between; + align-items: center; +} + +body > header > div { + width: 132px; + aspect-ratio: 132 / 49; + background-image: url(./logo.svg); +} + +body > header > a { + margin-top: 8px; + width: 30px; + aspect-ratio: 30 / 26; + background-image: url(./next.svg); +} + .logo-visible path { - fill: var(--color-beige); + fill: var(--color-beige); } + .mark path { - fill: var(--color-beige); + fill: var(--color-beige); }