Looking to add animation to a snippet where the login menu rolls out? Consider two methods: adjusting the left position of the login menu or using another div on top to slowly reveal the login menu after moving it. The challenge lies in maintaining transparency while covering one div with another. Any suggestions on achieving this seamlessly with CSS, JS, or jQuery?
// JavaScript code for handling the login animation
const accountImg = document.querySelector("#login");
let accountOpen = 0;
document.querySelector("#login").addEventListener("click", function () {
if (accountOpen == 0) {
// Open the login menu
document.querySelector(".login-wrap").classList.add("active");
accountOpen = 1;
// Show username field
document.querySelector("#username").style.opacity = "1";
document.querySelector("#username").style.visibility = "visible";
document.querySelector(".label-username").style.visibility = "visible";
document.querySelector(".content-username").style.visibility = "visible";
// Show password field
document.querySelector("#password").style.opacity = "1";
document.querySelector("#password").style.visibility = "visible";
document.querySelector(".label-password").style.visibility = "visible";
document.querySelector(".content-password").style.visibility = "visible";
// Show login button
document.querySelector(".login-wrap .login-btn").style.opacity = "1";
} else {
// Close the login menu
document.querySelector(".login-wrap.active").classList.remove("active");
accountOpen = 0;
// Hide password field
document.querySelector("#password").style.opacity = "0";
document.querySelector("#password").style.visibility = "hidden";
document.querySelector(".label-password").style.visibility = "hidden";
document.querySelector(".content-password").style.visibility = "hidden";
// Hide username field
document.querySelector("#username").style.opacity = "0";
document.querySelector("#username").style.visibility = "hidden";
document.querySelector(".label-username").style.visibility = "hidden";
document.querySelector(".content-username").style.visibility = "hidden";
// Hide login button
document.querySelector(".login-wrap .login-btn").style.opacity = "0";
}
});