summaryrefslogtreecommitdiff
path: root/assets/js
diff options
context:
space:
mode:
Diffstat (limited to 'assets/js')
-rw-r--r--assets/js/main.js38
-rw-r--r--assets/js/morph.js54
-rw-r--r--assets/js/transitions.js90
3 files changed, 91 insertions, 91 deletions
diff --git a/assets/js/main.js b/assets/js/main.js
index d32765e..587ee3e 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -3,8 +3,8 @@ const menu = document.getElementById("menu");
const menuClose = document.getElementById("menu-close");
if (menu && menuOpen && menuClose) {
- menuOpen.addEventListener("click", () => menu.classList.add("open"));
- menuClose.addEventListener("click", () => menu.classList.remove("open"));
+ menuOpen.addEventListener("click", () => menu.classList.add("open"));
+ menuClose.addEventListener("click", () => menu.classList.remove("open"));
}
@@ -12,24 +12,24 @@ const elements = document.querySelectorAll(".my-age")
const specificDate = new Date("2010-05-11T22:50:00");
const updateAge = () => {
- const currentDate = new Date();
- const age = (
- (currentDate - specificDate) /
- (1000 * 60 * 60 * 24 * 365.25)
- ).toFixed(15);
- let nextBirthday = new Date(specificDate);
- nextBirthday.setFullYear(currentDate.getFullYear());
- if (currentDate > nextBirthday) {
- nextBirthday.setFullYear(currentDate.getFullYear() + 1);
- }
- const timeDiff = nextBirthday - currentDate;
- const daysLeft = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
+ const currentDate = new Date();
+ const age = (
+ (currentDate - specificDate) /
+ (1000 * 60 * 60 * 24 * 365.25)
+ ).toFixed(15);
+ let nextBirthday = new Date(specificDate);
+ nextBirthday.setFullYear(currentDate.getFullYear());
+ if (currentDate > nextBirthday) {
+ nextBirthday.setFullYear(currentDate.getFullYear() + 1);
+ }
+ const timeDiff = nextBirthday - currentDate;
+ const daysLeft = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
- elements.forEach(e => {
- e.textContent = `${age}`;
- e.title = `${daysLeft} days left`;
- })
- requestAnimationFrame(updateAge);
+ elements.forEach(e => {
+ e.textContent = `${age}`;
+ e.title = `${daysLeft} days left`;
+ })
+ requestAnimationFrame(updateAge);
}
updateAge();
diff --git a/assets/js/morph.js b/assets/js/morph.js
index 728ff1f..aea6dff 100644
--- a/assets/js/morph.js
+++ b/assets/js/morph.js
@@ -1,43 +1,43 @@
const CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@._-";
function morph(element, target) {
- clearInterval(element._timer);
+ clearInterval(element._timer);
- const start = element.textContent;
- const length = Math.max(start.length, target.length);
+ const start = element.textContent;
+ const length = Math.max(start.length, target.length);
- let progress = 0;
+ let progress = 0;
- element._timer = setInterval(() => {
- progress += 0.05;
+ element._timer = setInterval(() => {
+ progress += 0.05;
- const currentLength = Math.round(
- start.length + (target.length - start.length) * progress
- );
+ const currentLength = Math.round(
+ start.length + (target.length - start.length) * progress
+ );
- let output = "";
+ let output = "";
- for (let i = 0; i < currentLength; i++) {
- if (progress > i / currentLength + 0.2 && target[i]) {
- output += target[i];
- } else {
- output += CHARS[Math.floor(Math.random() * CHARS.length)];
- }
- }
+ for (let i = 0; i < currentLength; i++) {
+ if (progress > i / currentLength + 0.2 && target[i]) {
+ output += target[i];
+ } else {
+ output += CHARS[Math.floor(Math.random() * CHARS.length)];
+ }
+ }
- element.textContent = output;
+ element.textContent = output;
- if (progress >= 1) {
- clearInterval(element._timer);
- element.textContent = target;
- }
- }, 15);
+ if (progress >= 1) {
+ clearInterval(element._timer);
+ element.textContent = target;
+ }
+ }, 15);
}
for (const link of document.querySelectorAll(".morph")) {
- const original = link.textContent;
- const alternate = link.dataset.alt;
+ const original = link.textContent;
+ const alternate = link.dataset.alt;
- link.addEventListener("mouseenter", () => morph(link, alternate));
- link.addEventListener("mouseleave", () => morph(link, original));
+ link.addEventListener("mouseenter", () => morph(link, alternate));
+ link.addEventListener("mouseleave", () => morph(link, original));
}
diff --git a/assets/js/transitions.js b/assets/js/transitions.js
index 3955a67..a8042b8 100644
--- a/assets/js/transitions.js
+++ b/assets/js/transitions.js
@@ -2,61 +2,61 @@ const displacement = document.getElementById("displacement");
const noise = document.getElementById("noise");
-var nextFunc = () => {}
+var nextFunc = () => { }
function transitionOut(callback) {
- document.body.style.filter = "url(#transition)"
- const src = new Number(displacement.getAttribute("scale"));
- noise.setAttribute("seed",Math.random() * 1000)
- if (src < 100) {
- displacement.setAttribute("scale", src + 20 + src);
- nextFunc = () => transitionOut(callback)
- requestAnimationFrame(nextFunc)
- } else {
- setTimeout(() =>{
- document.body.style.filter = ""
- },1000);
- callback()
- }
+ document.body.style.filter = "url(#transition)"
+ const src = new Number(displacement.getAttribute("scale"));
+ noise.setAttribute("seed", Math.random() * 1000)
+ if (src < 100) {
+ displacement.setAttribute("scale", src + 20 + src);
+ nextFunc = () => transitionOut(callback)
+ requestAnimationFrame(nextFunc)
+ } else {
+ setTimeout(() => {
+ document.body.style.filter = ""
+ }, 1000);
+ callback()
+ }
}
function transitionIn() {
- document.body.style.filter = "url(#transition)"
- const src = new Number(displacement.getAttribute("scale"));
- noise.setAttribute("seed",Math.random() * 1000)
- if (src > 0) {
- displacement.setAttribute("scale", src - 1 - (Math.max(src,1)/4));
- nextFunc = () => transitionIn();
- requestAnimationFrame(nextFunc)
- } else {
- displacement.setAttribute("scale", 0);
- document.body.style.filter = ""
- }
+ document.body.style.filter = "url(#transition)"
+ const src = new Number(displacement.getAttribute("scale"));
+ noise.setAttribute("seed", Math.random() * 1000)
+ if (src > 0) {
+ displacement.setAttribute("scale", src - 1 - (Math.max(src, 1) / 4));
+ nextFunc = () => transitionIn();
+ requestAnimationFrame(nextFunc)
+ } else {
+ displacement.setAttribute("scale", 0);
+ document.body.style.filter = ""
+ }
}
if (noise && displacement) {
- displacement.setAttribute("scale", 200);
- transitionIn()
- const links = document.querySelectorAll("a");
- links.forEach(l => {
- if (l.hasAttribute("no-transition")) return;
- if (l.href.startsWith(location.origin)) {
- l.addEventListener("click", (e)=>{
- e.preventDefault()
- displacement.setAttribute("scale", 0);
- transitionOut(() => {
- location.href = l.href
- });
- })
- }
- })
+ displacement.setAttribute("scale", 200);
+ transitionIn()
+ const links = document.querySelectorAll("a");
+ links.forEach(l => {
+ if (l.hasAttribute("no-transition")) return;
+ if (l.href.startsWith(location.origin)) {
+ l.addEventListener("click", (e) => {
+ e.preventDefault()
+ displacement.setAttribute("scale", 0);
+ transitionOut(() => {
+ location.href = l.href
+ });
+ })
+ }
+ })
} else {
- console.log("Can't do transitions!!")
+ console.log("Can't do transitions!!")
}
// for when going forwards or back
window.addEventListener("pageshow", (e) => {
- if (e.persisted) {
- displacement.setAttribute("scale", 200);
- transitionIn();
- }
+ if (e.persisted) {
+ displacement.setAttribute("scale", 200);
+ transitionIn();
+ }
});
generated by cgit (orig) 2026-07-09 07:40:33 +0000