From 41d4199450b648de769f03c1462443e547209b71 Mon Sep 17 00:00:00 2001 From: mileswa1q22 Date: Fri, 11 Apr 2025 18:35:22 +0000 Subject: [PATCH] Enhance animations across game and settings pages; implement fade-in effects for elements on load --- WebGames-master/WebGames-master/index.html | 50 +++------ gametoadd.html | 116 ++++++++++++++++++--- setting.html | 62 +++++++++++ 3 files changed, 175 insertions(+), 53 deletions(-) diff --git a/WebGames-master/WebGames-master/index.html b/WebGames-master/WebGames-master/index.html index 553117c3..d42df5b0 100644 --- a/WebGames-master/WebGames-master/index.html +++ b/WebGames-master/WebGames-master/index.html @@ -875,11 +875,11 @@ function animateGame(game) { anime({ targets: game, - translateY: [-50, 0], // Fly in from above - rotate: [-10, 0], // Rotate back to normal opacity: [0, 1], // Fade in - duration: 1000, // Animation duration - easing: 'easeOutElastic(1, 0.5)', // Elastic easing for a bouncy effect + translateY: [-50, 0], // Slide down + rotate: [-45, 0], // Small spin counterclockwise (start at -45 degrees and rotate to 0) + duration: 3000, // Animation duration (3 seconds) + easing: 'easeOutExpo', // Smooth easing }); } @@ -900,49 +900,23 @@ const games = document.querySelectorAll('.game'); games.forEach(game => { game.style.opacity = '0'; // Hide games initially - game.style.transform = 'translateY(-50px) rotate(-10deg)'; // Move them above and rotate slightly + game.style.transform = 'translateY(-50px) rotate(-45deg)'; // Move them above and rotate counterclockwise observer.observe(game); // Start observing the game }); - // Utility function to get a cookie - function getCookie(name) { - const cookies = document.cookie.split(';'); - for (let i = 0; i < cookies.length; i++) { - const cookie = cookies[i].trim(); - if (cookie.startsWith(name + '=')) { - return cookie.substring(name.length + 1); - } - } - return null; - } - - // Function to animate game elements - function animateGames() { - const games = document.querySelectorAll('.game'); - games.forEach(game => { - game.style.opacity = '0'; // Hide games initially - game.style.transform = 'translateY(-50px) rotate(-10deg)'; // Move them above and rotate slightly - }); - - // Use Anime.js to animate the games - anime({ - targets: '.game', - translateY: [-50, 0], // Fly in from above - rotate: [-10, 0], // Rotate back to normal - opacity: [0, 1], // Fade in - delay: anime.stagger(150), // Stagger animation for each card - duration: 1000, // Animation duration - easing: 'easeOutElastic(1, 0.5)', // Elastic easing for a bouncy effect - }); - } - // Check if animation is enabled const gameAnimationEnabled = getCookie('gameAnimation') === 'true'; // Trigger animations on page load if enabled window.onload = () => { if (gameAnimationEnabled) { - animateGames(); + games.forEach(game => observer.observe(game)); + } else { + // Make all games visible without animation + games.forEach(game => { + game.style.opacity = '1'; + game.style.transform = 'none'; + }); } }; diff --git a/gametoadd.html b/gametoadd.html index 63c11d35..85fe51fa 100644 --- a/gametoadd.html +++ b/gametoadd.html @@ -2,6 +2,7 @@ + Games to Add @@ -104,11 +105,14 @@ background-color: var(--button-hover-bg); color: var(--button-hover-text); } + + h1, .button-container .button, ul li { + opacity: 0; /* Hide elements initially */ + }

Games to Add

-
Home
@@ -148,33 +152,115 @@ document.body.style.setProperty('--button-bg', 'var(--button-bg-dark)'); document.body.style.setProperty('--button-hover-bg', 'var(--button-hover-bg-dark)'); document.body.style.setProperty('--button-hover-text', 'var(--button-hover-text-dark)'); - document.getElementById('toggleMode').textContent = 'Switch to Light Mode'; } else { document.body.style.setProperty('--background-color', 'var(--background-color-light)'); document.body.style.setProperty('--text-color', 'var(--text-color-light)'); document.body.style.setProperty('--button-bg', 'var(--button-bg-light)'); document.body.style.setProperty('--button-hover-bg', 'var(--button-hover-bg-light)'); document.body.style.setProperty('--button-hover-text', 'var(--button-hover-text-light)'); - document.getElementById('toggleMode').textContent = 'Switch to Dark Mode'; } } - // Toggle mode - const toggleModeButton = document.getElementById('toggleMode'); - toggleModeButton.addEventListener('click', () => { - const isDarkMode = getCookie('darkMode') === 'true'; - setCookie('darkMode', !isDarkMode, 30); // Save preference for 30 days - applyMode(!isDarkMode); - }); - // Apply saved mode on load const darkModeEnabled = getCookie('darkMode') === 'true'; applyMode(darkModeEnabled); + + // Function to animate the title + function animateTitle() { + anime({ + targets: 'h1', + opacity: [0, 1], // Fade in + translateY: [-50, 0], // Slide down + duration: 1000, // Animation duration + easing: 'easeOutExpo', // Smooth easing + }); + } + + // Function to animate the buttons + function animateButtons() { + anime({ + targets: '.button-container .button', + opacity: [0, 1], // Fade in + translateX: [-50, 0], // Slide in from the left + delay: anime.stagger(200), // Stagger animation for each button + duration: 800, // Animation duration + easing: 'easeOutExpo', // Smooth easing + }); + } + + // Function to animate the list items + function animateListItems() { + anime({ + targets: 'ul li', + opacity: [0, 1], // Fade in + translateY: [20, 0], // Slide up + delay: anime.stagger(150), // Stagger animation for each list item + duration: 800, // Animation duration + easing: 'easeOutExpo', // Smooth easing + }); + } + + // Function to toggle animations + function toggleAnimations() { + const animationsEnabled = getCookie('gameAnimation') === 'true'; + if (animationsEnabled) { + animateTitle(); + animateButtons(); + animateListItems(); + } else { + // Make everything visible without animations + document.querySelector('h1').style.opacity = '1'; + document.querySelector('h1').style.transform = 'none'; + + const buttons = document.querySelectorAll('.button-container .button'); + buttons.forEach(button => { + button.style.opacity = '1'; + button.style.transform = 'none'; + }); + + const listItems = document.querySelectorAll('ul li'); + listItems.forEach(item => { + item.style.opacity = '1'; + item.style.transform = 'none'; + }); + } + } + + // Ensure animations are enabled by default + if (getCookie('gameAnimation') === null) { + setCookie('gameAnimation', 'true', 30); // Default to animations enabled + } + + // Trigger animations on page load + window.onload = () => { + toggleAnimations(); + }; -
Comment Form is loading comments...
- - - +
Comment Form is loading comments...
+ + + diff --git a/setting.html b/setting.html index 7a612c9a..b44f0983 100644 --- a/setting.html +++ b/setting.html @@ -74,6 +74,10 @@ .setting-item.clear-cookies button:hover { background-color: #cc0000; } + + h1, .setting-item { + opacity: 0; /* Hide elements initially */ + } @@ -137,6 +141,7 @@ +