Nascondi l'elemento dietro il div trasparente ma non lo sfondo

Aug 23 2020

Quindi ho questo snippet, in cui voglio fare l'animazione, in cui viene visualizzato il menu di accesso, quindi ho pensato a circa 2 metodi. O cambia la posizione a sinistra del menu di accesso o crea un altro div in alto, che rivelerà lentamente il menu di accesso dopo averlo spostato. Ma qui arriva il problema con la trasparenza, in entrambi i metodi voglio coprire div con un altro div, ma rimanere lo stesso sfondo. C'è qualche trucco con css, js o jq?

const accountImg = document.querySelector("#login");
let accountOpen = 0;

document.querySelector("#login").addEventListener("click", function () {
    if (accountOpen == 0) {
        document.querySelector(".login-wrap").classList.add("active");
        accountOpen = 1;
        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";
        document.querySelector("#username").style.visibility = "visible";
        document.querySelector("#username").style.visibility = "visible";

        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";
        document.querySelector("#password").style.visibility = "visible";
        document.querySelector("#password").style.visibility = "visible";

        document.querySelector(".login-wrap .login-btn").style.opacity = "1";
    } else {
        document.querySelector(".login-wrap.active").classList.remove("active");
        accountOpen = 0;
        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";
        document.querySelector("#password").style.visibility = "hidden";
        document.querySelector("#password").style.visibility = "hidden";

        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";
        document.querySelector("#username").style.visibility = "hidden";
        document.querySelector("#username").style.visibility = "hidden";
        document.querySelector("#login-messages").style.visibility = "hidden";
        document.querySelector(".login-wrap .login-btn").style.opacity = "0";
    }
});

body{
  margin: 0;
  background: url('https://lh3.googleusercontent.com/proxy/An3EDuoKa8Q75DplT1mH3_oHUHS0T6MkeVaHRbLO-0WSyZKv7yYz5SvddaAR5rqcfqQMu2G7wRSUyLix70v_51uyNRY6jeHKJ1CXIev6toY_x69dsa0sHZVAiGtzvt0GsbAcD1X0QqDQkXBC02DftWQIhbmKfhmnjbyCZpg') no-repeat 0 0 scroll;
  background-size: cover;
  backdrop-filter: blur(15px) contrast(.5);
  height: 100vh;
  width: 100vw;
}
.login-container{
  position: fixed;
  width: 50%;
  height: 75px;
  top: 0;
  left: 0;
  z-index: 2;
}
#login{
  position: fixed;
  top: 35px;
  left: 2%;
  width: 10%;
  height: 40px;
  border-radius: 14px;
  box-shadow: 0px 3px 6px #00000029;
  border: 1px solid #FFFFFF;
  background: rgba(0,0,0,0);
  font-family: 'Gordita Regular';
  font-size: 18px;
  letter-spacing: 0px;
  color: #FFFFFF;
  text-shadow: 0px 3px 6px #00000029;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  z-index: 3;
}
#login-front{
  position: fixed;
  width: 12%;
  height: 75px;
  top: 0;
  left: 0%;
  z-index: 5;
}
.login-wrap.active{
  position: fixed;
  width: 32%;
  height: 75px;
  top: 0;
  left: 15%;
  z-index: 2;
  animation: RollOut 1.2s ease;
}
@keyframes RollOut{
  0% {
    left: -40%;
  } 100% {
    left: 15%;
  }
}
.login-wrap > input{
  position: relative;
  width: 120px;
  height: 20px;
  opacity: 0;
  border: none;
  padding-left: 4px;
}
.login-wrap::after{
  content: '';
  width: 0;
  height: 30px;
  position: absolute;
  top: 40px;
  left: -5%;
  border-left: 1px solid #FFFFFF;
  opacity: 0.42;
}
/* Name */
#username {
  width: 46%;
  height: 75%;
  color: black;
  top: 37%;
  border: none!important;
  outline: 0;
  background: rgba(0, 0, 0, 0);
  padding-left: 0!important;
  color: white;
  visibility: hidden;
  font-size: 17px;
  font-family: 'Gordita Regular';
  text-transform: none;
  padding-top: 35px;
}
#username:-internal-autofill-selected{
  background-color: white!important;
}
.label-username {
  position: absolute;
  border-radius: 0;
  left: 0;
  top: 60%;
  width: 46%;
  height: 50%;
  pointer-events: none;
  border-bottom: 1px solid #BDBDBD;
  background: none;
  text-indent: 0;
  visibility: hidden;
  opacity: 0.82;
}
.content-username {
  text-indent: 0;
  position: absolute;
  top: 18%;
  left: 0;
  transition: transform 0.3s ease, font-size 0.3s ease;
  color: white;
  visibility: hidden;
  transform: translateY(-160%);
  font-size: 12px;
}
.label-username:after {
    content: none;
    position: none;
    top: none;
    left: none;
    width: none;
    height: none;
    background: none;
    border-radius: none;
    transition: none;
}
/* Heslo */
#password {
  left: 4.25%;
  width: 49%;
  height: 50%;
  color: black;
  top: 37%;
  border: none!important;
  outline: 0;
  background: rgba(0, 0, 0, 0);
  padding-left: 0!important;
  color: white;
  visibility: hidden;
  font-size: 17px;
  font-family: 'Gordita Regular';
  text-transform: none;
  padding-top: 35px;
}
#password:-internal-autofill-selected{
  background-color: white!important;
}
.label-password {
  position: absolute;
  border-radius: 0;
  left: 51%;
  width: 49%;
  top: 60%;
  height: 50%;
  pointer-events: none;
  border-bottom: 1px solid #BDBDBD;
  background: none;
  text-indent: 0;
  visibility: hidden;
  opacity: 0.82;
}
.content-password {
  text-indent: 0;
  position: absolute;
  top: 18%;
  left: 0;
  transition: transform 0.3s ease, font-size 0.3s ease;
  color: white;
  visibility: hidden;
  transform: translateY(-160%);
  font-size: 12px;
}
.label-password:after {
    content: none;
    position: none;
    top: none;
    left: none;
    width: none;
    height: none;
    background: none;
    border-radius: none;
    transition: none;
}
.login-wrap .login-btn{
  position: absolute;
  right: -80%;
  top: 50%;
  width: 140px;
  height: 35px;
  border-radius: 6px;
  opacity: 0;
  cursor: pointer;
  color: black;
  background: rgba(0, 0, 0, 0);
  border: 1px solid white;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="login-container">
        <div id="login-front">
            <button id="login">Admin</button>
        </div>
        <div class="login-wrap">
                <input type="text" id="username" name="username" autocomplete="off" required placeholder="Přezdívka">
                <label for="username" class="label-username">
                    <span class="content-username">Přezdívka</span>
                </label>
                <input type="text" id="password" name="password" autocomplete="off" required placeholder="Heslo">
                <label for="password" class="label-password">
                    <span class="content-password">Heslo</span>
                </label>
                <ul id="login-messages"></ul>
                <button class="login-btn">Přihlásit</button>
        </div>
    </div>
</body>

Risposte

3 Ivan-Shafran Aug 23 2020 at 00:27

Suggerendo di farlo invece di due div:

Prova a impostare la transizione sulla classe "login-wrap" su

transition: width 1s ease-in-out

E cambia semplicemente la larghezza dell'elemento "a capo del login" da 0px alla larghezza di cui hai bisogno ogni volta che qualcuno fa clic sul pulsante