0

quisera saber si se puede insertar esto

.contenedor-box .formulario:nth-child(3){ display: block; }

desde un archivo .js a uno .css o si puedo cambiar el numero 3 del nth-child(3)

lo que busco es hacer como una animación que cambie una especie de venta de inicio de sección a un formulario de registro al presionar Don't have an account?.

introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí

codigo HTML y CSS

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}    

body{
    background: url(../img/fondo.jpg);
    -webkit-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    font-family: sans-serif;
        
}
.contenedor-box{
    background: rgba(0,0,0,.9);
    width: 100%;
    max-width: 350px;
    margin: 200px auto;
    color: #fff;
    border-radius: 5px;
    
    
    
    }

.contenedor-box .avatar{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    top: 145px;
    left: calc(50% - 50px)
}
.contenedor-box .reset-password{
    top: 7px;
    right: 7px;
    width: 130px;
    height: 30px;
    font-size: 12px;
    line-height: 25px;
    text-align: left;
    transition: all .5s ease;
    cursor: pointer;
    margin-left:   20px
}
.contenedor-box .toggle{
    top: 7px;
    right: 7px;
    width: 130px;
    height: 30px;
    font-size: 12px;
    line-height: 25px;
    text-align: center;
    transition: all .5s ease;
    cursor: pointer;
    margin-left:   20px
}

.contenedor-box .reset-password:hover{
    border-top: 2px solid #0095d9;
    border-bottom: 2px solid #0095d9;
}
.contenedor-box .toggle:hover{
    border-top: 2px solid #0095d9;
    border-bottom: 2px solid #0095d9;
}

.contenedor-box h1{
    margin: 30px 0 20px 0;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    
}

.contenedor-box label{
    margin: 0;
    padding: 0;
    font-weight: bold;
    display: block;
}

.contenedor-box input{
    width: 100%;
    margin-bottom: 20px;
}

.contenedor-box input[type="text"],
.contenedor-box input[type="email"],
.contenedor-box input[type="password"]{
    border: none;
    border-bottom: 2px solid #fff;
    background: transparent;
    outline: none;
    display: block;
    width: 100%;
    color: #fff;
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 2px;
    font-weight: normal;
    margin: 0 0 20px 0;
    transition: all .5s ease;
}

.contenedor-box input[type="text"]:focus,
.contenedor-box input[type="email"]:focus,
.contenedor-box input[type="password"]:focus{
    border-bottom: 2px solid #0095d9;
}

.contenedor-box input[type="button"]{
    border: none;
    outline: none;
    height: 40px;
    background: #F0D331;
    color: #000;
    font-size: 20px;
    border-radius: 20px;
    font-weight: 900;
    cursor: pointer;
    transition: all .3s ease;
    margin: 0;
}

.contenedor-box input[type="button"]:hover{
    background: rgba(9,120,220,0.9);
}

.contenedor-box .formulario{
    padding: 30px;
    display: none;
}

.contenedor-box .formulario:nth-child(3){
    
    display: block;
}
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Artsem</title>
        <link rel="stylesheet" href="Login JS/css/diseño.css" id="diseño">
        <script language="javascript" type="text/javascript" src="Login JS/js/main.js"></script>
        
       
        
    </head>
    
    <body>
       
        <div class="contenedor-box">
            <img class="avatar" src="Login JS/img/logo.png" alt="Logo de JS">
          
            <div class="formulario">
                <h1>Login Here</h1>
                <form action="#">
                   <!--USERNAME--> 
                   <label for="username">Username</label>
                   <input type="text" name="username" id="username" placeholder="Enter Username" required>
                   <!--PASSWORD-->
                   <label for="password">Password</label>
                   <input type="password" name="password" id="password" placeholder="Enter Password" required>
                   <input type="button" name="login" id="login" onclick="validar()" value="Log In">
                   
                </form>   
            </div>
            
            
            
            <div class="formulario" id="formulario">
                <h1>Sign Up Here</h1>
                <form action="#">
                   <label for="username">Username</label>
                   <input type="text" name="username" id="reg_username" placeholder="Enter Username" required>
                   <label for="password">Password</label>
                   <input type="password" name="password" id="reg_password" placeholder="Enter Password" required>
                   <label for="email">E-mail</label>
                   <input type="email" name="email" id="email" placeholder="Enter E-mail" required>
                   <label for="telefono">Telefono</label>
                   <input type="text" name="telefono" id="telefono" placeholder="Enter Telefono" required>
                   <input type="button" name="sign_up" id="sign_up" onclick="validar()" value="Sign Up">
                   
                </form>   
            </div>
            
            <div class="reset-password">
                <span href="#">Lost your password?</span>
            </div>
            
            <div class="toggle" id="toggle">
                <span>Don't have an account?</span>
            </div>
        </div>
        
        
      

    </body>
</html>

el tutorial el que me baso usa jquery pero yo ocupo hacerlo con javascript puro.

este es el codigo jQuery

$('.toggle').click(function()){
    $('.formulario').animate({

    height: "toggle",
    'padding-top': 'toggle',
    'padding-bottom': 'toggle',
    opacity: 'toggle'
    }, "slow")
}
4
  • 1
    ¿Y no te vale con cambiar las propiedades CSS del elemento en cuestión directamente desde JS? ¿Por qué necesitas modificar el fichero CSS?
    – Kiko_L
    el 16 nov. 2018 a las 7:19
  • Cómo lo haria? Yo apenas estoy aprendiendo esto el 16 nov. 2018 a las 7:26
  • 1
    Esteba, hemos detectado que tienes 2 usuarios (el de la pregunta y el del comentario ). Para unirlos, lee Vincular a mi cuenta de usuario una pregunta que hice como invitado
    – lois6b
    el 16 nov. 2018 a las 7:29
  • No tienes que cambiar el archivo css con js (no creo que se pueda hacer eso) solo añadir una clase o quitarla segun lo necesites
    – user7176
    el 16 nov. 2018 a las 10:08

1 respuesta 1

0

Creo esto es lo que necesitas: En el .js esta la explicación!

document.addEventListener('DOMContentLoaded', function () {
    // Guardamos en un arreglo todos los elementos con la clase "formulario"
    const forms = document.querySelectorAll('.formulario');
    /* Dado que hay 2 en las pocisiones 0 y 1 aqui puedes tomar la decision de cual activar
    * para mi ejemplo active el 2do formulario
    * */
    forms[1].style.display = "block";
});
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body{
    background: url(../img/fondo.jpg);
    -webkit-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    font-family: sans-serif;

}
.contenedor-box{
    background: rgba(0,0,0,.9);
    width: 100%;
    max-width: 350px;
    margin: 200px auto;
    color: #fff;
    border-radius: 5px;



}

.contenedor-box .avatar{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    top: 145px;
    left: calc(50% - 50px)
}
.contenedor-box .reset-password{
    top: 7px;
    right: 7px;
    width: 130px;
    height: 30px;
    font-size: 12px;
    line-height: 25px;
    text-align: left;
    transition: all .5s ease;
    cursor: pointer;
    margin-left:   20px
}
.contenedor-box .toggle{
    top: 7px;
    right: 7px;
    width: 130px;
    height: 30px;
    font-size: 12px;
    line-height: 25px;
    text-align: center;
    transition: all .5s ease;
    cursor: pointer;
    margin-left:   20px
}

.contenedor-box .reset-password:hover{
    border-top: 2px solid #0095d9;
    border-bottom: 2px solid #0095d9;
}
.contenedor-box .toggle:hover{
    border-top: 2px solid #0095d9;
    border-bottom: 2px solid #0095d9;
}

.contenedor-box h1{
    margin: 30px 0 20px 0;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    text-align: center;

}

.contenedor-box label{
    margin: 0;
    padding: 0;
    font-weight: bold;
    display: block;
}

.contenedor-box input{
    width: 100%;
    margin-bottom: 20px;
}

.contenedor-box input[type="text"],
.contenedor-box input[type="email"],
.contenedor-box input[type="password"]{
    border: none;
    border-bottom: 2px solid #fff;
    background: transparent;
    outline: none;
    display: block;
    width: 100%;
    color: #fff;
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 2px;
    font-weight: normal;
    margin: 0 0 20px 0;
    transition: all .5s ease;
}

.contenedor-box input[type="text"]:focus,
.contenedor-box input[type="email"]:focus,
.contenedor-box input[type="password"]:focus{
    border-bottom: 2px solid #0095d9;
}

.contenedor-box input[type="button"]{
    border: none;
    outline: none;
    height: 40px;
    background: #F0D331;
    color: #000;
    font-size: 20px;
    border-radius: 20px;
    font-weight: 900;
    cursor: pointer;
    transition: all .3s ease;
    margin: 0;
}

.contenedor-box input[type="button"]:hover{
    background: rgba(9,120,220,0.9);
}

.contenedor-box .formulario{
    padding: 30px;
    display: none;
}

/*
.contenedor-box .formulario:nth-child(3){

    display: block;
}*/
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Artsem</title>
    <link rel="stylesheet" href="css/index.css" id="diseño">
    <script language="javascript" type="text/javascript" src="Login JS/js/main.js"></script>



</head>

<body>

<div class="contenedor-box">
    <img class="avatar" src="Login JS/img/logo.png" alt="Logo de JS">

    <div class="formulario">
        <h1>Login Here</h1>
        <form action="#">
            <!--USERNAME-->
            <label for="username">Username</label>
            <input type="text" name="username" id="username" placeholder="Enter Username" required>
            <!--PASSWORD-->
            <label for="password">Password</label>
            <input type="password" name="password" id="password" placeholder="Enter Password" required>
            <input type="button" name="login" id="login" onclick="validar()" value="Log In">

        </form>
    </div>



    <div class="formulario" id="formulario">
        <h1>Sign Up Here</h1>
        <form action="#">
            <label for="username">Username</label>
            <input type="text" name="username" id="reg_username" placeholder="Enter Username" required>
            <label for="password">Password</label>
            <input type="password" name="password" id="reg_password" placeholder="Enter Password" required>
            <label for="email">E-mail</label>
            <input type="email" name="email" id="email" placeholder="Enter E-mail" required>
            <label for="telefono">Telefono</label>
            <input type="text" name="telefono" id="telefono" placeholder="Enter Telefono" required>
            <input type="button" name="sign_up" id="sign_up" onclick="validar()" value="Sign Up">

        </form>
    </div>

    <div class="reset-password">
        <span href="#">Lost your password?</span>
    </div>

    <div class="toggle" id="toggle">
        <span>Don't have an account?</span>
    </div>
</div>



<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.