diff --git a/globalStyle.css b/globalStyle.css index 410c5c4..f246278 100644 --- a/globalStyle.css +++ b/globalStyle.css @@ -16,4 +16,9 @@ html { .pxFont { font-family: "Roboto", sans-serif; font-size: 1rem; +} + +@keyframes slide-left { + 0% { transform: translateX(0%); } + 100% { transform: translateX(-100%); } } \ No newline at end of file diff --git a/index.html b/index.html index 0264a37..60f4c7c 100644 --- a/index.html +++ b/index.html @@ -13,46 +13,44 @@ - - - - - +
+ + + + + + +
-

Loading...
Loading files...

Tip: Tip loading...

@@ -63,6 +61,7 @@ + \ No newline at end of file diff --git a/loadingScreen.css b/loadingScreen.css index 8ca67ce..92f8808 100644 --- a/loadingScreen.css +++ b/loadingScreen.css @@ -20,7 +20,7 @@ 100% {opacity: 0%;} } /* custom pixel 3x5 font */ -.loadingCornerText { +#loadingCornerText { background-color: transparent; color: #ffffff; border: none; diff --git a/loadingScreen.js b/loadingScreen.js index 1a3b67a..a49984d 100644 --- a/loadingScreen.js +++ b/loadingScreen.js @@ -22,6 +22,11 @@ let selectedTip = tips[randomIntFrom0(tips.length)] const showLoading = localStorage["showLoading"] || "true" +function newTip() { + selectedTip = tips[randomIntFrom0(tips.length)] +} + + function setLoadingProgress(newText) { loadingScreenProgress.innerHTML = `Loading...
${newText}

Tip: ${selectedTip}` } @@ -48,7 +53,9 @@ function removeLoadingScreen() { loadingScreenEl.style.animation = `fade-out ${fadeOutDur}s forwards` setTimeout(function() { - document.body.removeChild(loadingScreenEl) + loadingScreenEl.style.left = "100vw" + document.getElementById("loadingCornerText").remove() + newTip() }, fadeOutDur * 1000) }, 500) } diff --git a/screenTransition.js b/screenTransition.js new file mode 100644 index 0000000..8fb4249 --- /dev/null +++ b/screenTransition.js @@ -0,0 +1,19 @@ +function slideTransition(url) { + const dur = 0.5 + const loadingTime = 1.0 + + const slideLeft = `slide-left ${dur}s cubic-bezier(0, 0, 0, 1.46) forwards` + + let loadingScreen = document.getElementById("loadingScreen") + let mainDiv = document.getElementById("mainDiv") + + loadingScreen.style.animation = slideLeft + mainDiv.style.animation = slideLeft + + setLoadingProgress(`Loading URL "${url}"`) + + setTimeout(function() { + setLoadingProgress("Done!") + setTimeout(function() { document.location = url }, loadingTime * 1000) + }, (dur + loadingTime) * 1000) +} \ No newline at end of file diff --git a/style.css b/style.css index 566386f..c8863d2 100644 --- a/style.css +++ b/style.css @@ -1,10 +1,6 @@ body { height: 100vh; - background-image: radial-gradient( - circle at center 50%, - #62007f 0%, - #0d0035 100%); - background-position: 0% 10vh; + background-color: #323232; overflow: hidden; margin: 0%; } @@ -26,4 +22,12 @@ body { aspect-ratio: 1 / 1; image-rendering: pixelated; transform: translate(-50%, -50%); +} +#mainDiv { + background-position: 0% 10vh; + background-image: radial-gradient( + circle at center 50%, + #62007f 0%, + #0d0035 100%); + height: 100vh; } \ No newline at end of file