ByteDice/ByteDiceWeb
1
0
Fork 0
Code Issues Pull Requests Actions Releases Activity

added transition when pressing buttons

Browse Source
This commit is contained in:
8BitBiscotti
2024-12-13 09:49:38 +01:00
parent 515cc107ab
commit 41268fba3c
6 changed files with 78 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
globalStyle.css
+5
View File
@@ -17,3 +17,8 @@ html {
font-family: "Roboto", sans-serif;
font-size: 1rem;
}
@keyframes slide-left {
0% { transform: translateX(0%); }
100% { transform: translateX(-100%); }
}
index.html
+13 -14
View File
@@ -13,46 +13,44 @@
</head>
<body style="background-color: #323232; color: #ffffff;">
<div id="mainDiv">
<img src="/assets/starNoise_512x512.png" draggable="false" id="starNoise">
<img src="/assets/synthwaveSun_40x40.png" draggable="false" class="synthSun">
<canvas id="synthwave" style="position: absolute; bottom: round(0%, var(--pxDensityPx)); left: round(0%, var(--pxDensityPx));"></canvas>
<!-- change discord URL to server URL -->
<ul class="navBar">
<li>
<!-- discord URL -->
<a href="https://discord.com" target="_blank" class="navBtn">
<button onclick="slideTransition('https://discord.com')" class="navBtn">
<img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png">
<img class="navBtnIcon" draggable="false" src="/assets/discord_8x8.png">
</a>
</button>
</li>
<li>
<a href="https://youtube.com/@ByteDice" target="_blank" class="navBtn">
<button onclick="slideTransition('https://youtube.com/@ByteDice')" class="navBtn">
<img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png">
<img class="navBtnIcon" draggable="false" src="/assets/youtube_8x8.png">
</a>
</button>
</li>
<li>
<a href="https://github.com/ByteDice" target="_blank" class="navBtn">
<button onclick="slideTransition('https://github.com/ByteDice')" class="navBtn">
<img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png">
<img class="navBtnIcon" draggable="false" src="/assets/github_8x8.png">
</a>
</button>
</li>
<li>
<a class="navBtn">
<button class="navBtn">
<img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png">
<img class="navBtnIcon" draggable="false" src="/assets/powerplates_8x8.png">
</a>
</li>
<li>
<a class="navBtn">
<img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png">
</a>
</button>
</li>
</ul>
</div>
<div class="bgDiv" id="loadingScreen">
<img class="loadingImg" draggable="false" src="/assets/byteDiceBlinkAnim_32x32.png">
<button class="loadingCornerText pxFont" onclick="stopShowingLoading()">
<button class="pxFont" onclick="stopShowingLoading()" id="loadingCornerText">
Press ESC to instantly close the loading screen<br>Or click me to never see it again.
</button>
<p id="loadingText">Loading...<br>Loading files...<br><br>Tip: Tip loading...</p>
@@ -63,6 +61,7 @@
<script src="/synthwaveEffect.js"></script>
<script src="/script.js"></script>
<script src="/loadingScreen.js"></script>
<script src="/screenTransition.js"></script>
</body>
</html>
loadingScreen.css
+1 -1
View File
@@ -20,7 +20,7 @@
100% {opacity: 0%;}
}
/* custom pixel 3x5 font */
.loadingCornerText {
#loadingCornerText {
background-color: transparent;
color: #ffffff;
border: none;
loadingScreen.js
+8 -1
View File
@@ -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...<br>${newText}<br><br>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)
}
screenTransition.js
+19
View File
@@ -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)
}
style.css
+9 -5
View File
@@ -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%;
}
@@ -27,3 +23,11 @@ body {
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;
}