Radiquum/radiquum.github.io
1
0
Fork 0
mirror of https://github.com/Radiquum/radiquum.github.io.git synced 2025-05-07 21:39:34 +05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add animations

Browse source
This commit is contained in:
Kentai Radiquum 2024-09-14 23:48:40 +05:00
parent 1f4628a259
commit 53c4d26eaa
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
4 changed files with 238 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

126
static/script.js
View file

@ -1,5 +1,60 @@
function updatePlayingTrack() {
function sleep(time) {
return new Promise((resolve) => setTimeout(resolve, time));
}
const SYMBOL_DELAY = 150;
function deletePreviousTrack(newTrackName) {
const trackName = document.getElementById("track-name");
const prevTrackNameLen = trackName.innerHTML.length;
trackName.style.setProperty("--cursor-animation", "none");
let removed = 0;
const interval = setInterval(() => {
removed += 1;
trackName.innerHTML = trackName.innerHTML.substring(
0,
prevTrackNameLen - removed
);
if (removed == prevTrackNameLen - 1) {
clearInterval(interval);
updateTrack(newTrackName);
return true;
}
}, SYMBOL_DELAY);
}
function updateTrack(newTrackName) {
const trackName = document.getElementById("track-name");
const TrackNameLen = newTrackName.length;
let added = 0;
const interval = setInterval(() => {
if (added < TrackNameLen) {
trackName.innerHTML += newTrackName[added];
console.log(added, TrackNameLen, newTrackName[added]);
added += 1;
}
if (added == TrackNameLen) {
clearInterval(interval);
setTimeout(() => {
trackName.innerHTML += '"';
}, SYMBOL_DELAY);
trackName.style.setProperty("--cursor-animation", "blink");
setTimeout(() => {
trackName.style.setProperty("--cursor-color", "transparent");
}, SYMBOL_DELAY * 3);
return true;
}
}, SYMBOL_DELAY);
}
async function updatePlayingTrack() {
const trackName = document.getElementById("track-name");
const prevTrackName = trackName.innerHTML;
const prevTrackNameLen = trackName.innerHTML.length;
fetch("https://lastfm-last-played.biancarosa.com.br/radiquum/latest-song")
.then((res) => {
@ -9,54 +64,63 @@ function updatePlayingTrack() {
return res.json();
})
.then((data) => {
trackName.innerHTML = `"${data.track.artist['#text']} - ${data.track.name}"`;
if (
prevTrackName != `"${data.track.artist["#text"]} - ${data.track.name}"`
) {
trackName.style.setProperty("--cursor-color", "#fff");
trackName.style.setProperty("--cursor-animation", "blink");
setTimeout(() => {
deletePreviousTrack(
`${data.track.artist["#text"]} - ${data.track.name}`
);
}, SYMBOL_DELAY * 4);
}
})
.catch((err) => {
trackName.innerHTML = "\"ERROR: last.fm is not reachable\"";
deletePreviousTrack("ERROR: last.fm is not reachable");
console.log(err);
});
}
function getScrollPosition () {
const height =
document.documentElement.scrollHeight -
document.documentElement.clientHeight;
const windowScroll = document.documentElement.scrollTop;
const scrolled = (windowScroll / height) * 100;
return Math.floor(scrolled)
}
window.onload = () => {
updatePlayingTrack();
setInterval(updatePlayingTrack, 360000);
setInterval(updatePlayingTrack, 180000);
};
function getScrollPosition() {
const height =
document.documentElement.scrollHeight -
document.documentElement.clientHeight;
const windowScroll = document.documentElement.scrollTop;
const scrolled = (windowScroll / height) * 100;
return Math.floor(scrolled);
}
const header = document.getElementById("header")
let last_Y_pos = 0
let header_opacity = 0
const header = document.getElementById("header");
let last_Y_pos = 0;
let header_opacity = 0;
window.onscroll = () => {
let scrollPosition = getScrollPosition()
console.log(last_Y_pos, window.scrollY, scrollPosition, header_opacity)
let scrollPosition = getScrollPosition();
if (scrollPosition < 1) {
header.style.display = "none"
header.style.display = "none";
} else {
header.style.display = "block"
header.style.display = "block";
}
if ((window.scrollY > last_Y_pos) && (scrollPosition > 1)) {
header_opacity += 0.1
} else if ((window.scrollY < last_Y_pos) && (scrollPosition < 1)) (
header_opacity -= 0.1
)
last_Y_pos = window.scrollY
if (window.scrollY > last_Y_pos && scrollPosition > 1) {
header_opacity += 0.1;
} else if (window.scrollY < last_Y_pos && scrollPosition < 1)
header_opacity -= 0.1;
last_Y_pos = window.scrollY;
if (header_opacity > 1) {
header_opacity = 1
header_opacity = 1;
} else if (header_opacity < 0) {
header_opacity = 0
header_opacity = 0;
}
header.style.setProperty("--header-opacity", `${header_opacity.toFixed(2)}`)
}
header.style.setProperty("--header-opacity", `${header_opacity.toFixed(2)}`);
};