44 lines
1.5 KiB
JavaScript
44 lines
1.5 KiB
JavaScript
let rotated = false;
|
|
const image = document.getElementById("rotateImage");
|
|
const menu = document.getElementById("menu");
|
|
const buttons = document.querySelectorAll(".menu-button");
|
|
|
|
function toggleImage() {
|
|
if (rotated) {
|
|
image.style.transform = "rotate(0deg)";
|
|
menu.style.animation = "fade-out 0.2s ease-in-out forwards";
|
|
buttons.forEach((button, index) => {
|
|
setTimeout(() => {
|
|
button.style.animation = "fade-out 0.3s ease-in-out forwards";
|
|
setTimeout(() => {
|
|
button.style.display = "none";
|
|
}, 500);
|
|
}, 80 * index);
|
|
});
|
|
rotated = false;
|
|
} else {
|
|
image.style.transform = "rotate(270deg)";
|
|
menu.style.animation = "fade-in 0.2s ease-in-out forwards";
|
|
buttons.forEach((button, index) => {
|
|
setTimeout(() => {
|
|
button.style.animation = "fade-in 0.3s ease-in-out forwards";
|
|
button.style.display = "block";
|
|
}, 80 * index);
|
|
});
|
|
menu.style.display = "block";
|
|
rotated = true;
|
|
}
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
var buttons = document.querySelectorAll(".menu-button");
|
|
buttons.forEach(function (button) {
|
|
button.addEventListener("click", function () {
|
|
var pageName = button.getAttribute("data-page");
|
|
if (pageName) {
|
|
window.location.href = pageName;
|
|
}
|
|
});
|
|
});
|
|
});
|