From f42a879bf19e19e77c3f5bd7071ba5945e54f857 Mon Sep 17 00:00:00 2001 From: mileswa1q22 Date: Tue, 15 Apr 2025 13:37:20 +0000 Subject: [PATCH] Add dynamic iframe for background music across multiple pages --- WebGames-master/WebGames-master/index.html | 27 ++++++++++++++++------ gametoadd.html | 9 ++++++++ index.html | 9 ++++++++ setting.html | 9 ++++++++ 4 files changed, 47 insertions(+), 7 deletions(-) diff --git a/WebGames-master/WebGames-master/index.html b/WebGames-master/WebGames-master/index.html index e1156fc8..8cdab3d0 100644 --- a/WebGames-master/WebGames-master/index.html +++ b/WebGames-master/WebGames-master/index.html @@ -190,7 +190,7 @@ - +

Web Games

@@ -774,6 +774,15 @@ 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 function setCookie(name, value, days) { 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) { anime({ targets: games, opacity: [0, 1], // Fade in - translateY: [50, 0], // Slide up from below - duration: 1000, // Animation duration (1 second) + translateY: [70, 0], // Slide up from below + 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 delay: anime.stagger(50), // 50ms delay between each game }); @@ -894,7 +907,7 @@ const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { - // Animate the game with a staggered delay + // Animate the game with a staggered delay and multi-step rotation animateGames(entry.target); observer.unobserve(entry.target); // Stop observing after animation } @@ -905,7 +918,7 @@ const games = document.querySelectorAll('.game'); games.forEach(game => { 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 @@ -932,7 +945,7 @@ // Enable animations games.forEach(game => { 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 }); } else { diff --git a/gametoadd.html b/gametoadd.html index 4582e6c6..a64ca448 100644 --- a/gametoadd.html +++ b/gametoadd.html @@ -166,6 +166,15 @@ const darkModeEnabled = getCookie('darkMode') === 'true'; 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 animateTitle() { anime({ diff --git a/index.html b/index.html index 28d674c5..820780f9 100644 --- a/index.html +++ b/index.html @@ -144,6 +144,15 @@ 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 if (getCookie('gameAnimation') === null) { setCookie('gameAnimation', 'true', 30); // Default to animations enabled diff --git a/setting.html b/setting.html index 2c1e4513..7baab1e7 100644 --- a/setting.html +++ b/setting.html @@ -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 window.onload = () => { const musicEnabled = localStorage.getItem('backgroundMusicEnabled') === 'true';