miles/moon-gaming
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add dynamic iframe for background music across multiple pages

Browse Source
This commit is contained in:
miles
2025-04-15 13:37:20 +00:00
parent 44c62f1882
commit f42a879bf1
4 changed files with 47 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebGames-master/WebGames-master/index.html
+20 -7
View File
@@ -190,7 +190,7 @@
</style> </style>
</head> </head>
<body> <body>
<iframe src="music.html" style="display: none;" id="musicIframe"></iframe> <iframe src="/music.html" style="display: none;" id="musicIframe"></iframe>
<h1 id="pageTitle">Web Games</h1> <h1 id="pageTitle">Web Games</h1>
<button class="toggle-mode" id="toggleMode">Switch to Light Mode</button> <button class="toggle-mode" id="toggleMode">Switch to Light Mode</button>
<div class="button-container"> <div class="button-container">
@@ -774,6 +774,15 @@
noResultsElement.style.display = hasResults ? 'none' : 'flex'; noResultsElement.style.display = hasResults ? 'none' : 'flex';
} }
// Add the iframe dynamically if it doesn't already exist
if (!document.getElementById('musicIframe')) {
const iframe = document.createElement('iframe');
iframe.src = 'music.html';
iframe.id = 'musicIframe';
iframe.style.display = 'none';
document.body.appendChild(iframe);
}
// Utility function to set a cookie // Utility function to set a cookie
function setCookie(name, value, days) { function setCookie(name, value, days) {
const date = new Date(); const date = new Date();
@@ -878,13 +887,17 @@
}); });
} }
// Function to animate all game elements with a staggered delay // Function to animate all game elements with a staggered delay and multi-step rotation
function animateGames(games) { function animateGames(games) {
anime({ anime({
targets: games, targets: games,
opacity: [0, 1], // Fade in opacity: [0, 1], // Fade in
translateY: [50, 0], // Slide up from below translateY: [70, 0], // Slide up from below
duration: 1000, // Animation duration (1 second) rotate: [
{ value: -45, duration: 500 }, // Start at -45 degrees
{ value: 35, duration: 500 }, // Rotate to 35 degrees
{ value: 0, duration: 1000 }, // Rotate to 0 degrees
],
easing: 'easeOutExpo', // Smooth easing easing: 'easeOutExpo', // Smooth easing
delay: anime.stagger(50), // 50ms delay between each game delay: anime.stagger(50), // 50ms delay between each game
}); });
@@ -894,7 +907,7 @@
const observer = new IntersectionObserver((entries, observer) => { const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => { entries.forEach(entry => {
if (entry.isIntersecting) { if (entry.isIntersecting) {
// Animate the game with a staggered delay // Animate the game with a staggered delay and multi-step rotation
animateGames(entry.target); animateGames(entry.target);
observer.unobserve(entry.target); // Stop observing after animation observer.unobserve(entry.target); // Stop observing after animation
} }
@@ -905,7 +918,7 @@
const games = document.querySelectorAll('.game'); const games = document.querySelectorAll('.game');
games.forEach(game => { games.forEach(game => {
game.style.opacity = '0'; // Hide games initially game.style.opacity = '0'; // Hide games initially
game.style.transform = 'translateY(50px)'; // Move them below their final position game.style.transform = 'translateY(70px) rotate(-45deg)'; // Move them below and rotate to -45 degrees
}); });
// Wait for the page to fully load before starting animations // Wait for the page to fully load before starting animations
@@ -932,7 +945,7 @@
// Enable animations // Enable animations
games.forEach(game => { games.forEach(game => {
game.style.opacity = '0'; // Reset opacity game.style.opacity = '0'; // Reset opacity
game.style.transform = 'translateY(50px)'; // Reset position game.style.transform = 'translateY(70px) rotate(-45deg)'; // Reset position and rotation
observer.observe(game); // Start observing the game observer.observe(game); // Start observing the game
}); });
} else { } else {
gametoadd.html
+9
View File
@@ -166,6 +166,15 @@
const darkModeEnabled = getCookie('darkMode') === 'true'; const darkModeEnabled = getCookie('darkMode') === 'true';
applyMode(darkModeEnabled); applyMode(darkModeEnabled);
// Add the iframe dynamically if it doesn't already exist
if (!document.getElementById('musicIframe')) {
const iframe = document.createElement('iframe');
iframe.src = 'music.html';
iframe.id = 'musicIframe';
iframe.style.display = 'none';
document.body.appendChild(iframe);
}
// Function to animate the title // Function to animate the title
function animateTitle() { function animateTitle() {
anime({ anime({
index.html
+9
View File
@@ -144,6 +144,15 @@
return null; return null;
} }
// Add the iframe dynamically if it doesn't already exist
if (!document.getElementById('musicIframe')) {
const iframe = document.createElement('iframe');
iframe.src = 'music.html';
iframe.id = 'musicIframe';
iframe.style.display = 'none';
document.body.appendChild(iframe);
}
// Ensure animations are enabled by default // Ensure animations are enabled by default
if (getCookie('gameAnimation') === null) { if (getCookie('gameAnimation') === null) {
setCookie('gameAnimation', 'true', 30); // Default to animations enabled setCookie('gameAnimation', 'true', 30); // Default to animations enabled
setting.html
+9
View File
@@ -275,6 +275,15 @@
} }
} }
// Add the iframe dynamically if it doesn't already exist
if (!document.getElementById('musicIframe')) {
const iframe = document.createElement('iframe');
iframe.src = 'music.html';
iframe.id = 'musicIframe';
iframe.style.display = 'none';
document.body.appendChild(iframe);
}
// Set the initial state of the button // Set the initial state of the button
window.onload = () => { window.onload = () => {
const musicEnabled = localStorage.getItem('backgroundMusicEnabled') === 'true'; const musicEnabled = localStorage.getItem('backgroundMusicEnabled') === 'true';