mirror of
https://github.com/Radiquum/radiquum.github.io.git
synced 2025-04-06 08:14:34 +00:00
fix: track animation symbols render
This commit is contained in:
parent
53c4d26eaa
commit
c610529e90
1 changed files with 10 additions and 4 deletions
|
@ -3,14 +3,18 @@ function sleep(time) {
|
||||||
}
|
}
|
||||||
|
|
||||||
const SYMBOL_DELAY = 150;
|
const SYMBOL_DELAY = 150;
|
||||||
|
let DELETE_INTERVAL = null;
|
||||||
|
let UPDATE_INTERVAL = null;
|
||||||
|
|
||||||
function deletePreviousTrack(newTrackName) {
|
function deletePreviousTrack(newTrackName) {
|
||||||
const trackName = document.getElementById("track-name");
|
const trackName = document.getElementById("track-name");
|
||||||
const prevTrackNameLen = trackName.innerHTML.length;
|
const prevTrackNameLen = trackName.innerHTML.length;
|
||||||
trackName.style.setProperty("--cursor-animation", "none");
|
trackName.style.setProperty("--cursor-animation", "none");
|
||||||
|
clearInterval(DELETE_INTERVAL);
|
||||||
|
clearInterval(UPDATE_INTERVAL);
|
||||||
|
|
||||||
let removed = 0;
|
let removed = 0;
|
||||||
const interval = setInterval(() => {
|
DELETE_INTERVAL = setInterval(() => {
|
||||||
removed += 1;
|
removed += 1;
|
||||||
trackName.innerHTML = trackName.innerHTML.substring(
|
trackName.innerHTML = trackName.innerHTML.substring(
|
||||||
0,
|
0,
|
||||||
|
@ -18,7 +22,7 @@ function deletePreviousTrack(newTrackName) {
|
||||||
);
|
);
|
||||||
|
|
||||||
if (removed == prevTrackNameLen - 1) {
|
if (removed == prevTrackNameLen - 1) {
|
||||||
clearInterval(interval);
|
clearInterval(DELETE_INTERVAL);
|
||||||
updateTrack(newTrackName);
|
updateTrack(newTrackName);
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
@ -28,9 +32,11 @@ function deletePreviousTrack(newTrackName) {
|
||||||
function updateTrack(newTrackName) {
|
function updateTrack(newTrackName) {
|
||||||
const trackName = document.getElementById("track-name");
|
const trackName = document.getElementById("track-name");
|
||||||
const TrackNameLen = newTrackName.length;
|
const TrackNameLen = newTrackName.length;
|
||||||
|
clearInterval(DELETE_INTERVAL);
|
||||||
|
clearInterval(UPDATE_INTERVAL);
|
||||||
|
|
||||||
let added = 0;
|
let added = 0;
|
||||||
const interval = setInterval(() => {
|
UPDATE_INTERVAL = setInterval(() => {
|
||||||
if (added < TrackNameLen) {
|
if (added < TrackNameLen) {
|
||||||
trackName.innerHTML += newTrackName[added];
|
trackName.innerHTML += newTrackName[added];
|
||||||
console.log(added, TrackNameLen, newTrackName[added]);
|
console.log(added, TrackNameLen, newTrackName[added]);
|
||||||
|
@ -38,7 +44,7 @@ function updateTrack(newTrackName) {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (added == TrackNameLen) {
|
if (added == TrackNameLen) {
|
||||||
clearInterval(interval);
|
clearInterval(UPDATE_INTERVAL);
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
trackName.innerHTML += '"';
|
trackName.innerHTML += '"';
|
||||||
}, SYMBOL_DELAY);
|
}, SYMBOL_DELAY);
|
||||||
|
|
Loading…
Add table
Reference in a new issue