fade out, test debug point
This commit is contained in:
parent
f5a8dc5220
commit
3c1a8696cb
2 changed files with 59 additions and 5 deletions
|
@ -5,6 +5,18 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Minecraft Twitch Chat Overlay</title>
|
||||
<link rel="stylesheet" href="/static/css/style.css"> <!-- Link to external CSS -->
|
||||
<style>
|
||||
.message {
|
||||
transition: opacity 1s, height 1s, margin 1s, padding 1s;
|
||||
overflow: hidden;
|
||||
}
|
||||
.fade-out {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="chat"></div>
|
||||
|
@ -33,11 +45,7 @@
|
|||
const messageElement = document.createElement('div');
|
||||
messageElement.classList.add('message');
|
||||
messageElement.textContent = msg;
|
||||
|
||||
// Fade out older messages if there are more than 10
|
||||
if (data.messages.length > 10 && index < data.messages.length - 10) {
|
||||
messageElement.classList.add('fade-out');
|
||||
}
|
||||
messageElement.timestamp = Date.now(); // Store the timestamp
|
||||
|
||||
chat.appendChild(messageElement);
|
||||
});
|
||||
|
@ -47,8 +55,29 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Function to fade out old messages
|
||||
function fadeOutOldMessages() {
|
||||
const messages = document.querySelectorAll('#chat .message');
|
||||
const now = Date.now();
|
||||
const fadeOutDuration = 10000; // 10 seconds
|
||||
|
||||
messages.forEach(message => {
|
||||
const age = now - message.timestamp;
|
||||
if (age > fadeOutDuration) {
|
||||
message.classList.add('fade-out');
|
||||
// Remove the element from the DOM after the transition ends
|
||||
message.addEventListener('transitionend', () => {
|
||||
message.remove();
|
||||
}, { once: true });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Fetch chat messages every second
|
||||
setInterval(fetchChat, 1000);
|
||||
|
||||
// Check and fade out old messages every second
|
||||
setInterval(fadeOutOldMessages, 1000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
Loading…
Add table
Add a link
Reference in a new issue