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';