feat: change credit code but not clear enough
This commit is contained in:
parent
4dca350c97
commit
dddb927c24
@ -10,13 +10,13 @@
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<style>
|
||||
:root {
|
||||
--height: 520px;
|
||||
--speed: 60;
|
||||
--height: 500px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<audio id="bgm" src="/assets/music/credit.mp3"></audio>
|
||||
<div class="container-credits" id="credits">
|
||||
<a class="back" href="onboard.php" data-aos="fade-in" data-aos-duration="3000">✖</a>
|
||||
<div class="credits">
|
||||
@ -86,48 +86,37 @@
|
||||
|
||||
|
||||
|
||||
<div style="height:40px;"></div>
|
||||
<div style="height:40px"></div>
|
||||
</div>
|
||||
<div style="height:40px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var backgroundMusic = document.createElement('audio');
|
||||
backgroundMusic.src = "assets/music/leaderboard.";
|
||||
backgroundMusic.play();
|
||||
(function () {
|
||||
const inner = document.getElementById('creditsInner');
|
||||
const speed = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--speed')) || 40; // px/sec
|
||||
let last = performance.now();
|
||||
let y = 450;
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const bgm = document.getElementById("bgm");
|
||||
bgm.play()
|
||||
const inner = document.getElementById("creditsInner");
|
||||
let y = 0;
|
||||
let blockH = inner.scrollHeight / 2;
|
||||
const speed = 40;
|
||||
|
||||
// When content is loaded we compute single-block height (half of inner because we duplicated)
|
||||
function start() {
|
||||
const singleBlockHeight = inner.scrollHeight / 2;
|
||||
// guard
|
||||
if (!isFinite(singleBlockHeight) || singleBlockHeight <= 0) return;
|
||||
|
||||
function frame(now) {
|
||||
const dt = (last - now) / 1000; last = now;
|
||||
y = y + speed * dt; // move down
|
||||
if (y >= singleBlockHeight) y -= singleBlockHeight; // loop
|
||||
function loop() {
|
||||
y -= speed / 60;
|
||||
if (y <= -blockH) y = 0;
|
||||
inner.style.transform = `translateY(${y}px)`;
|
||||
requestAnimationFrame(frame);
|
||||
}
|
||||
requestAnimationFrame(frame);
|
||||
requestAnimationFrame(loop);
|
||||
}
|
||||
|
||||
// Wait a tick so browser computes heights (if fonts still loading)
|
||||
window.addEventListener('load', () => setTimeout(start, 10));
|
||||
// Also restart if window resized (recalc heights)
|
||||
window.addEventListener('resize', () => {
|
||||
// reset y to safe value
|
||||
window.addEventListener("resize", () => {
|
||||
blockH = inner.scrollHeight / 2;
|
||||
y = 0;
|
||||
});
|
||||
})();
|
||||
|
||||
loop();
|
||||
});
|
||||
</script>
|
||||
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
||||
<script>
|
||||
|
||||
@ -309,8 +309,6 @@ td {
|
||||
height: var(--height);
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .85));
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, .7);
|
||||
padding: 24px 12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -93,7 +93,6 @@ if($result){
|
||||
<tr>
|
||||
<td><?php echo $realrank; ?></td>
|
||||
<td><?php echo $nama; ?></td>
|
||||
|
||||
<td><?php echo $score; ?> PTS</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user