blob: a8042b8ddec7b59819012a3e6d618e9b5040fe94 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
const displacement = document.getElementById("displacement");
const noise = document.getElementById("noise");
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()
}
}
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 = ""
}
}
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
});
})
}
})
} else {
console.log("Can't do transitions!!")
}
// for when going forwards or back
window.addEventListener("pageshow", (e) => {
if (e.persisted) {
displacement.setAttribute("scale", 200);
transitionIn();
}
});
|
