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

Enhance animations across game and settings pages; implement fade-in effects for elements on load

Browse Source
This commit is contained in:
miles
2025-04-11 18:35:22 +00:00
parent 21dee36a98
commit 41d4199450
3 changed files with 175 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebGames-master/WebGames-master/index.html
+12 -38
View File
@@ -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';
});
}
};
</script>
gametoadd.html
+99 -13
View File
@@ -2,6 +2,7 @@
<html lang="en">
<head>
<script defer src="https://chirpy.dev/bootstrapper.js" data-chirpy-domain="fun-miles-4jub.onrender.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Games to Add</title>
@@ -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 */
}
</style>
</head>
<body>
<h1>Games to Add</h1>
<button class="button" id="toggleMode">Switch to Light Mode</button>
<div class="button-container">
<a href="/index.html" class="button">Home</a>
</div>
@@ -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();
};
</script>
<!-- begin wwww.htmlcommentbox.com -->
<div id="HCB_comment_box"><a href="http://www.htmlcommentbox.com">Comment Form</a> is loading comments...</div>
<link rel="stylesheet" type="text/css" href="https://www.htmlcommentbox.com/static/skins/bootstrap/twitter-bootstrap.css?v=0" />
<script type="text/javascript" id="hcb"> /*<!--*/ if(!window.hcb_user){hcb_user={};} (function(){var s=document.createElement("script"), l=hcb_user.PAGE || (""+window.location).replace(/'/g,"%27"), h="https://www.htmlcommentbox.com";s.setAttribute("type","text/javascript");s.setAttribute("src", h+"/jread?page="+encodeURIComponent(l).replace("+","%2B")+"&mod=%241%24wq1rdBcg%24piEQg.u8ZJ10jZd4Ns2cl%2F"+"&opts=16798&num=10&ts=1744117748100");if (typeof s!="undefined") document.getElementsByTagName("head")[0].appendChild(s);})(); /*-->*/ </script>
<!-- end www.htmlcommentbox.com -->
<script type="text/javascript" id="hcb">
/*<!--*/
if (!window.hcb_user) {
hcb_user = {};
}
(function () {
var s = document.createElement("script"),
l = hcb_user.PAGE || ("" + window.location).replace(/'/g, "%27"),
h = "https://www.htmlcommentbox.com";
s.setAttribute("type", "text/javascript");
s.setAttribute(
"src",
h +
"/jread?page=" +
encodeURIComponent(l).replace("+", "%2B") +
"&mod=%241%24wq1rdBcg%24piEQg.u8ZJ10jZd4Ns2cl%2F" +
"&opts=16798&num=10&ts=1744117748100"
);
if (typeof s != "undefined") document.getElementsByTagName("head")[0].appendChild(s);
})();
/*-->*/
</script>
<!-- end www.htmlcommentbox.com -->
</body>
</html>
setting.html
+62
View File
@@ -74,6 +74,10 @@
.setting-item.clear-cookies button:hover {
background-color: #cc0000;
}
h1, .setting-item {
opacity: 0; /* Hide elements initially */
}
</style>
</head>
@@ -137,6 +141,7 @@
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script>
// Utility function to set a cookie
function setCookie(name, value, days) {
@@ -170,6 +175,48 @@
}
}
// 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 settings items
function animateSettingsItems() {
anime({
targets: '.setting-item',
opacity: [0, 1], // Fade in
translateY: [20, 0], // Slide up
delay: anime.stagger(150), // Stagger animation for each item
duration: 800, // Animation duration
easing: 'easeOutExpo', // Smooth easing
});
}
// Function to toggle animations
function toggleAnimations() {
const animationsEnabled = getCookie('gameAnimation') === 'true';
if (animationsEnabled) {
animateTitle();
animateSettingsItems();
} else {
// Make everything visible without animations
document.querySelector('h1').style.opacity = '1';
document.querySelector('h1').style.transform = 'none';
const settingsItems = document.querySelectorAll('.setting-item');
settingsItems.forEach(item => {
item.style.opacity = '1';
item.style.transform = 'none';
});
}
}
// Function to toggle a setting
function toggleSetting(buttonId, cookieName) {
const button = document.getElementById(buttonId);
@@ -193,9 +240,24 @@
if (cookieName === 'darkMode') {
applyDarkMode(!currentState);
}
// Trigger animations dynamically
if (cookieName === 'gameAnimation') {
toggleAnimations();
}
});
}
// 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();
};
// Apply toggle functionality to all buttons
toggleSetting('toggleDarkMode', 'darkMode');
toggleSetting('toggleCloakJS', 'cloakJS');