From 5d91df1c9f78a93e14fa46ec41af87e5c2822c08 Mon Sep 17 00:00:00 2001 From: Aske Lange <44546482+AskeLange@users.noreply.github.com> Date: Tue, 21 May 2024 22:19:41 +0200 Subject: [PATCH] feat: all the changes --- .DS_Store | Bin 6148 -> 6148 bytes 04-clippath-mouse/styles.css | 25 -- {01-clippath => 1-1-clippath}/index.html | 7 +- {01-clippath => 1-1-clippath}/styles.css | 43 ++-- {02-clippath => 1-2-clippath}/index.html | 5 +- {02-clippath => 1-2-clippath}/styles.css | 2 +- {03-mouse => 2-1-mouse}/index.html | 4 +- {03-mouse => 2-1-mouse}/scripts.js | 0 {03-mouse => 2-1-mouse}/styles.css | 0 2-2-animation-basics/ignore.css | 25 ++ 2-2-animation-basics/ignore.js | 89 +++++++ 2-2-animation-basics/index.html | 48 ++++ 01-clippath/scripts.js => 2-3-loop/ignore.css | 0 02-clippath/scripts.js => 2-3-loop/ignore.js | 0 2-3-loop/index.html | 17 ++ 2-4-interpolation/index.html | 48 ++++ 2-4-interpolation/scripts.js | 48 ++++ 2-4-interpolation/styles.css | 21 ++ .../index.html | 4 +- .../scripts.js | 10 +- 2-5-clippath-mouse/styles.css | 23 ++ _your-amazing-ideas/index.html | 22 ++ _your-amazing-ideas/scripts.js | 0 _your-amazing-ideas/styles.css | 0 stroke-demo/index.html | 222 +++++++++--------- 25 files changed, 490 insertions(+), 173 deletions(-) delete mode 100644 04-clippath-mouse/styles.css rename {01-clippath => 1-1-clippath}/index.html (83%) rename {01-clippath => 1-1-clippath}/styles.css (77%) rename {02-clippath => 1-2-clippath}/index.html (82%) rename {02-clippath => 1-2-clippath}/styles.css (86%) rename {03-mouse => 2-1-mouse}/index.html (76%) rename {03-mouse => 2-1-mouse}/scripts.js (100%) rename {03-mouse => 2-1-mouse}/styles.css (100%) create mode 100644 2-2-animation-basics/ignore.css create mode 100644 2-2-animation-basics/ignore.js create mode 100644 2-2-animation-basics/index.html rename 01-clippath/scripts.js => 2-3-loop/ignore.css (100%) rename 02-clippath/scripts.js => 2-3-loop/ignore.js (100%) create mode 100644 2-3-loop/index.html create mode 100644 2-4-interpolation/index.html create mode 100644 2-4-interpolation/scripts.js create mode 100644 2-4-interpolation/styles.css rename {04-clippath-mouse => 2-5-clippath-mouse}/index.html (75%) rename {04-clippath-mouse => 2-5-clippath-mouse}/scripts.js (83%) create mode 100644 2-5-clippath-mouse/styles.css create mode 100644 _your-amazing-ideas/index.html create mode 100644 _your-amazing-ideas/scripts.js create mode 100644 _your-amazing-ideas/styles.css diff --git a/.DS_Store b/.DS_Store index ba340012d529f8825e33a4ea30d691978fb53493..498eb6a759712f1ab2f54f5d9c1f5553c188d193 100644 GIT binary patch delta 125 zcmZoMXfc=&$(_TH$xr}QRZeaU@&CRWk_Z~l4i(ADlaZb%E?b+ xU|`rb*?_5#Q>?n$Ku5vM#CY;rCTYfw$tRiQr8|MLIP`C3WM*aE%+B$b9{^*?9XkL3 delta 139 zcmZoMXfc=&$z8yZ$WX$N!Jx}vxLJ^SIpbsl5f()*hGd2uhD?S6AcRXNl@}Kz<>V(Z zFfi<#Y{XQ^BUxQ-WNBfcqhMlaIC%||G-LPV6HM}|JwOFm4JZpP%FD^mO9#p`0`2<7 NGO>YWGdss$egG~uB7^_{ diff --git a/04-clippath-mouse/styles.css b/04-clippath-mouse/styles.css deleted file mode 100644 index 8c81b71..0000000 --- a/04-clippath-mouse/styles.css +++ /dev/null @@ -1,25 +0,0 @@ -.target { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - - background-color: var(--color-beige); - 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; - - --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/01-clippath/index.html b/1-1-clippath/index.html similarity index 83% rename from 01-clippath/index.html rename to 1-1-clippath/index.html index 0be0a45..4b46c88 100644 --- a/01-clippath/index.html +++ b/1-1-clippath/index.html @@ -1,16 +1,15 @@ - Clip path - Example 01 + 1.1: Clip Path -
- +
- clip-path:
xywh(20% 0 80% 50%) + clip-path:
xywh(20% 10% 70% 50%)
diff --git a/01-clippath/styles.css b/1-1-clippath/styles.css similarity index 77% rename from 01-clippath/styles.css rename to 1-1-clippath/styles.css index a254448..9a02e8f 100644 --- a/01-clippath/styles.css +++ b/1-1-clippath/styles.css @@ -1,9 +1,3 @@ -.target { - position: relative; - width: 240px; - height: 240px; -} - .target > div { position: absolute; top: 0; @@ -11,12 +5,33 @@ 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 b/1-2-clippath/index.html similarity index 82% rename from 02-clippath/index.html rename to 1-2-clippath/index.html index 15bad21..4cadbf1 100644 --- a/02-clippath/index.html +++ b/1-2-clippath/index.html @@ -1,16 +1,15 @@ - Clip path - Example 02 + 1.2: Clip Path Transition -
- +
- Clip path - Example 03 (Mouse) + 2.1: Mouse @@ -10,7 +10,7 @@
- +
diff --git a/03-mouse/scripts.js b/2-1-mouse/scripts.js similarity index 100% rename from 03-mouse/scripts.js rename to 2-1-mouse/scripts.js diff --git a/03-mouse/styles.css b/2-1-mouse/styles.css similarity index 100% rename from 03-mouse/styles.css rename to 2-1-mouse/styles.css diff --git a/2-2-animation-basics/ignore.css b/2-2-animation-basics/ignore.css new file mode 100644 index 0000000..6f26396 --- /dev/null +++ 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 new file mode 100644 index 0000000..52490b9 --- /dev/null +++ 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 new file mode 100644 index 0000000..74095dc --- /dev/null +++ b/2-2-animation-basics/index.html @@ -0,0 +1,48 @@ + + + + 2.2: Animation Basics + + + + + + + +
+
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ + +
+ + diff --git a/01-clippath/scripts.js b/2-3-loop/ignore.css similarity index 100% rename from 01-clippath/scripts.js rename to 2-3-loop/ignore.css diff --git a/02-clippath/scripts.js b/2-3-loop/ignore.js similarity index 100% rename from 02-clippath/scripts.js rename to 2-3-loop/ignore.js diff --git a/2-3-loop/index.html b/2-3-loop/index.html new file mode 100644 index 0000000..a0db94d --- /dev/null +++ b/2-3-loop/index.html @@ -0,0 +1,17 @@ + + + + 2.3: Animation Loops + + + + + + + +
+
+ +
+ + diff --git a/2-4-interpolation/index.html b/2-4-interpolation/index.html new file mode 100644 index 0000000..35ce9e1 --- /dev/null +++ b/2-4-interpolation/index.html @@ -0,0 +1,48 @@ + + + + 2.4: Interpolation + + + + + + +
+
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ + +
+ + diff --git a/2-4-interpolation/scripts.js b/2-4-interpolation/scripts.js new file mode 100644 index 0000000..dc908be --- /dev/null +++ b/2-4-interpolation/scripts.js @@ -0,0 +1,48 @@ +/** + * https://en.wikipedia.org/wiki/Linear_interpolation + */ +function interpolate(v0, v1, t) { + return (1 - t) * v0 + t * v1; +} + +/** + * This functions runs each time, the user + * 'pulls' the range input. + */ +function updateModifier() { + const input = document.querySelector("input"); + const target = document.querySelector(".target"); + + /** + * Runs the lerp function multiple times, + * based on how much the user has pulled the + * range input. Getting one percent closer to + * the goal each time. + */ + let p = 0; + for (let i = 0; i < +input.value; i++) { + p = interpolate(p, 1, 0.01); + } + + /** + * Sets the result of the lerp function as a + * css variable. + */ + target.style.setProperty("--p", p); +} + +/** + * This part can safely be ignored. + */ +document.addEventListener("DOMContentLoaded", function () { + const elements = document.querySelectorAll(".timeline div"); + + for (let i = 0; i < elements.length; i++) { + let p = 0; + for (let j = 0; j < i; j++) { + p = interpolate(p, 1, 0.3); + } + + elements[i].style.setProperty("--p", p); + } +}); diff --git a/2-4-interpolation/styles.css b/2-4-interpolation/styles.css new file mode 100644 index 0000000..25c41b9 --- /dev/null +++ b/2-4-interpolation/styles.css @@ -0,0 +1,21 @@ +.timeline, +.target { + position: relative; + + width: 100%; + height: 1px; + background-color: var(--color-beige); +} + +.timeline div, +.target div { + position: absolute; + top: 50%; + left: calc(var(--p, 0) * 100%); + transform: translate(calc(var(--p, 0) * -100%), -50%); + + width: 16px; + height: 16px; + background-color: var(--color-beige); + border-radius: 8px; +} diff --git a/04-clippath-mouse/index.html b/2-5-clippath-mouse/index.html similarity index 75% rename from 04-clippath-mouse/index.html rename to 2-5-clippath-mouse/index.html index 0089e67..c91db39 100644 --- a/04-clippath-mouse/index.html +++ b/2-5-clippath-mouse/index.html @@ -1,7 +1,7 @@ - Clip path - Example 03 (Mouse) + 2.5: Clip path, mouse and loops @@ -10,7 +10,7 @@
- +
diff --git a/04-clippath-mouse/scripts.js b/2-5-clippath-mouse/scripts.js similarity index 83% rename from 04-clippath-mouse/scripts.js rename to 2-5-clippath-mouse/scripts.js index 60d9b93..9008fef 100644 --- a/04-clippath-mouse/scripts.js +++ b/2-5-clippath-mouse/scripts.js @@ -7,12 +7,12 @@ let last = 0; /** * https://en.wikipedia.org/wiki/Linear_interpolation */ -function lerp(v0, v1, t) { +function interpolate(v0, v1, t) { return (1 - t) * v0 + t * v1; } /** - * Animation loop, see example: ... + * Animation loop, see example: 2-3-loop */ function animate(now) { window.requestAnimationFrame(animate); @@ -29,10 +29,10 @@ function animate(now) { * Interpolates xActual and yActual towards xTarget and yTarget, * taking the delta value into account. * - * See example: ... + * See example: 2-4-interpolation */ - xActual = lerp(xActual, xTarget, 0.1 * delta); - yActual = lerp(yActual, yTarget, 0.1 * delta); + xActual = interpolate(xActual, xTarget, 0.05 * delta); + yActual = interpolate(yActual, yTarget, 0.05 * delta); /** * Sets xActual and yActual as CSS variables. diff --git a/2-5-clippath-mouse/styles.css b/2-5-clippath-mouse/styles.css new file mode 100644 index 0000000..a0d4848 --- /dev/null +++ b/2-5-clippath-mouse/styles.css @@ -0,0 +1,23 @@ +.target { + position: fixed; + top: -2%; + left: -2%; + width: 104%; + height: 104%; + + 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; + + --x-normal: calc(var(--x) * 2 - 1); + --y-normal: calc(var(--y) * 2 - 1); + + --x-translate: calc(var(--x-normal) * -2vw); + --y-translate: calc(var(--y-normal) * -2vh); + + --x-clippath: calc(var(--x) * 100% - var(--x-translate)); + --y-clippath: calc(var(--y) * 100% - var(--y-translate)); + + transform: translate(var(--x-translate), var(--y-translate)); + clip-path: ellipse(320px 320px at var(--x-clippath) var(--y-clippath)); +} diff --git a/_your-amazing-ideas/index.html b/_your-amazing-ideas/index.html new file mode 100644 index 0000000..b01eee1 --- /dev/null +++ b/_your-amazing-ideas/index.html @@ -0,0 +1,22 @@ + + + + Your amazing ideas! + + + + + + + +
+
+
+ + + + diff --git a/_your-amazing-ideas/scripts.js b/_your-amazing-ideas/scripts.js new file mode 100644 index 0000000..e69de29 diff --git a/_your-amazing-ideas/styles.css b/_your-amazing-ideas/styles.css new file mode 100644 index 0000000..e69de29 diff --git a/stroke-demo/index.html b/stroke-demo/index.html index ac0c092..6ad1d3f 100644 --- a/stroke-demo/index.html +++ b/stroke-demo/index.html @@ -1,116 +1,116 @@ - - Stroke demo - - - - - - -
-
- -
- - - - - - - - - -
-
-
- - + + + + + +
+
+ +
+ + + + + + + + + +
+
+
+ + - -
-
-
- dash-offset
-
-
- dash-array
-
-
+ style=" + stroke: var(--color-beige); + stroke-dasharray: var(--dash-array); + stroke-dashoffset: var(--dash-offset); + " + stroke-width="6" + stroke-linecap="round" + /> + +
+
+
+ dash-offset
- +
+ dash-array
+
+
+
+