14

Resulta que tengo este login simple, manejo Overhang.js para mostrar un mensaje en caso de que las credenciales sean incorrectas. Con este mismo plugin podría mostrar un mensaje cuando el acceso es correcto, pero entre todas sus opciones ninguna me convence del todo (temas UI/UX).

Para este caso, cuando sea correcto el acceso, quisiera manejar por ejemplo, un cambio en el mensaje del input tipo submit que pase de "Ingresar" a "Ingresando".

O podría ser también un efecto fade como el de los modales de Bootstrap que oscurece la pantalla.

$(document).ready(function() {
  $('.background-image').on('webkitAnimationEnd', function(e) {
    $(this).addClass('visible');
  });
});
/* ---------- GENERAL ---------- */

* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  height: 100%;
}

body {
  background-color: #ebebeb;
  font-family: 'Open Sans', sans-serif;
  line-height: 1.5;
  margin: 0;
  min-height: 100%;
}

input {
  background-image: none;
  border: none;
  font: inherit;
  margin: 0;
  padding: 0;
  transition: all .3s;
}

/* ---------- ALIGN ---------- */

.align {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ---------- GRID ---------- */

.grid {
  margin-left: auto;
  margin-right: auto;
  max-width: 500px;
  max-height: 500px;
  width: 80%;
}

/* ---------- LOGIN ---------- */

#login h2 {
  background: #0088a3;
  border-radius: 15px 15px 0 0;
  color: #fff;
  font-size: 28px;
  padding: 20px 26px;
  height: 100%;
}

#login h2 span[class*="fontawesome-"] {
  margin-right: 14px;
}

#login fieldset {
  background: #fff;
  border-radius: 0 0 10px 10px;
  padding: 20px 26px;
}

#login fieldset p {
  color: #777;
  margin-bottom: 14px;
}

#login fieldset p:last-child {
  margin-bottom: 0;
}

#login fieldset input {
  border-radius: 3px;
}

#login fieldset input[type="text"],
#login fieldset input[type="password"] {
  background: #eee;
  color: #777;
  padding: 4px 10px;
  width: 100%;
}

#login fieldset input[type="submit"] {
  background: #0088a3;
  color: #fff;
  display: block;
  margin: 0 auto;
  padding: 4px 0;
  width: 100px;
}

#login fieldset input[type="submit"]:hover {
  background: #0088a3;
  border-radius: 15px 2px;
  cursor: pointer;
}

#login fieldset input[type="submit"]:active {
  background: #0088a3;
  border-radius: 2px 15px;
  cursor: wait;
}

@import "compass/css3";
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.background-image {
  background: url('../images/bg.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  -webkit-animation-name: fade-in;
  -webkit-animation-duration: .5s;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 1s;
}

.background-image.visible {
  opacity: 1;
}
<body class="align">

  <div class="align background-image">

    <div class="grid">

      <div id="login">

        <h2><img src="images/banner-wh.png" alt="Logo" style="max-width: 100%; width: auto;"></h2>

        <form id="loginform" action="validarcode.php" method="POST" autocomplete="off">

          <fieldset>

            <p><label for="usuario">Usuario</label></p>
            <p><input type="text" name="txtusuario" id="usuario" autofocus></p>

            <p><label for="password">Contraseña</label></p>
            <p><input type="password" name="txtpassword" id="password"></p>

            <br><br>

            <p><input class="with-arrow" type="submit" name="Enviar" value="Ingresar"> <i class="icon-arrow-right"></i> </p>

            <br>

            <div style="font-size: 14px;color: #444;">¿Olvidó su contraseña?</div>
            <h1 style="font-size: 12px;color: #555;">Escríbanos a <a href="mailto:[email protected]?subject=Restablecer%20Contraseña">[email protected]</a></h1>

          </fieldset>

        </form>

      </div>

    </div>

  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  <script src="assets/overhang.js"></script>
  <script src="assets/app.js"></script>

</body>

Resumiendo, sé que con JS puedo mostrar este alert al presionar el submit, pero en su lugar cómo podría llamar por ejemplo una animación en CSS?

function exito() {
  alert("Ingresando...");
  return true;
}
<input class="with-arrow" type="submit" name="Enviar" value="Ingresar" onclick="return exito();">

4
  • Prueba con sweet Alert
    – DjCrazy
    Commented el 10 jul. 2019 a las 18:34
  • 3
    Básicamente lo que buscas es una animación de css que se ejecute luego de hacer submit. No?
    – Jose
    Commented el 10 jul. 2019 a las 18:38
  • @matahombres tal cual
    – LauraZ
    Commented el 10 jul. 2019 a las 18:44
  • @DjCrazy no quisiera usar más plugins, pero voy a echarle un vistazo!
    – LauraZ
    Commented el 10 jul. 2019 a las 18:45

2 respuestas 2

10

Este es un ejemplo con el código funcionando, en este caso le puse una animación y un mensaje de ingresando antes de enviar el formulario, luego puedes modificar ese contenido como gustes. Al hacer click en Ingresar la animación se mostrará 4 segundos (mas abajo explico como cambiar ese tiempo) y luego se enviará el formulario.

$(document).ready(function() {
  $('.background-image').on('webkitAnimationEnd', function(e) {
    $(this).addClass('visible');
  });
});

function animar(){
  document.getElementById('eboton').className="hide";
  document.getElementById('animacion').className="preloader";
  document.getElementById('mensaje').className="mensaje";
  setTimeout(enviar, 4000);
}

function enviar(){
  document.getElementById('loginform').submit();
}
/* ---------- GENERAL ---------- */

* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  height: 100%;
}

body {
  background-color: #ebebeb;
  font-family: 'Open Sans', sans-serif;
  line-height: 1.5;
  margin: 0;
  min-height: 100%;
}

input {
  background-image: none;
  border: none;
  font: inherit;
  margin: 0;
  padding: 0;
  transition: all .3s;
}


/* ---------- ALIGN ---------- */

.align {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


/* ---------- GRID ---------- */

.grid {
  margin-left: auto;
  margin-right: auto;
  max-width: 500px;
  max-height: 500px;
  width: 80%;
}


/* ---------- LOGIN ---------- */

#login h2 {
  background: #0088a3;
  border-radius: 15px 15px 0 0;
  color: #fff;
  font-size: 28px;
  padding: 20px 26px;
  height: 100%;
}

#login h2 span[class*="fontawesome-"] {
  margin-right: 14px;
}

#login fieldset {
  background: #fff;
  border-radius: 0 0 10px 10px;
  padding: 20px 26px;
}

#login fieldset p {
  color: #777;
  margin-bottom: 14px;
}

#login fieldset p:last-child {
  margin-bottom: 0;
}

#login fieldset input {
  border-radius: 3px;
}

#login fieldset input[type="text"],
#login fieldset input[type="password"] {
  background: #eee;
  color: #777;
  padding: 4px 10px;
  width: 100%;
}

.hide{
  display: none;
}
.with-arrow {
  background-image: none;
  border: none;
  font: inherit;
  margin: 0;
  padding: 0;
  transition: all .3s;
  background: #0088a3;
  color: #fff;
  display: block;
  margin: 0 auto;
  padding: 4px 0;
  width: 100px;
  text-align: center;
}

.with-arrow:hover {
  background: #0088a3;
  border-radius: 15px 2px;
  cursor: pointer;
}

.mensaje {
  text-align: center;
}

.preloader {
  width: 70px;
  height: 70px;
  border: 10px solid #eee;
  border-top: 10px solid #666;
  border-radius: 50%;
  animation-name: girar;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  margin-left: auto;
  margin-right: auto;
}
@keyframes girar {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@import "compass/css3";
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.background-image {
  background: url('../images/bg.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  -webkit-animation-name: fade-in;
  -webkit-animation-duration: .5s;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 1s;
}

.background-image.visible {
  opacity: 1;
}
<body class="align">
  <div class="align background-image">
    <div class="grid">
      <div id="login">
        <h2><img src="images/banner-wh.png" alt="Logo" style="max-width: 100%; width: auto;"></h2>
        <form id="loginform" action="validarcode.php" method="POST" autocomplete="off">
          <fieldset>
            <p><label for="usuario">Usuario</label></p>
            <p><input type="text" name="txtusuario" id="usuario" autofocus></p>
            <p><label for="password">Contraseña</label></p>
            <p><input type="password" name="txtpassword" id="password"></p>
            <br><br>
            <div id="animacion" class="hide"></div>
            <p id="mensaje" class="hide">Ingresando...<p>
            <p><a id="eboton" class="with-arrow" onclick="animar()" name="Enviar" > Ingresar <i class="icon-arrow-right"></i></a> 
            </p>
            <br>
            <div style="font-size: 14px;color: #444;">¿Olvidó su contraseña?</div>
            <h1 style="font-size: 12px;color: #555;">Escríbanos a <a href="mailto:[email protected]?subject=Restablecer%20Contraseña">[email protected]</a></h1>
          </fieldset>
        </form>
      </div>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  <script src="assets/overhang.js"></script>
  <script src="assets/app.js"></script>
</body>

Explicando un poco la solución del ejemplo:

Primero debes cambiar el <input type="submit" value="Ingresar"> por un <a>Ingresar</a> para evitar que el formulario se envíe inmediatamente y pueda verse la animación.

Luego debes crear una función de enviar() para enviar el formulario luego de mostrar la animación.

function enviar(){
  document.getElementById('loginform').submit();
}

Luego debes colocar una función animar() al <a>Ingresar</a> para que se muestren las animaciones al hacer click en Ingresar.

El paso mas importante es darle tiempo a la animación para que se muestre antes de que se envíe el formulario, lo puedes hacer con setTimeout(funcion(), tiempo);, en este caso le puse 4 segundos:

setTimeout(enviar, 4000);

Por ultimo en la función animar() debes hacer que aparezcan los objetos animados que quieres mostrar y ocultar el boton de ingresar antes de que el formulario se envíe.

function animar(){
  /*
  Mostrar y Ocultar Elementos
  */
  setTimeout(enviar, 4000);
}

Y eso fue lo que se hizo a grandes rasgos. Espero te sea de ayuda. Saludos.

3
  • 1
    Gracias por tu respuesta, me parece que se acerca bastante a lo que deseo :) voy a probarlo en mi proyecto y te aviso
    – LauraZ
    Commented el 10 jul. 2019 a las 20:49
  • 1
    Hola!! Mil gracias por tu ayuda, tuve que hacer muchas maromas y le dediqué un buen tiempo para que tu código no entrara en conflicto con mis scripts, pero al final lo pude solucionar! :D
    – LauraZ
    Commented el 11 jul. 2019 a las 14:21
  • @LauraZ de nada, que tengas buen día. Commented el 11 jul. 2019 a las 14:54
6

Creo que podrías utilizar javascript: primero cambias el comportamiento normal del formulario, evitando la redirección, luego lanzas la animación que necesites y posteriormente haces la redirección desde javascript. Podrías incluso lanzar la redirección segun determinada condición. Ejemplo.

Formulario html:

$("#form1").on("submit",function(e) {
//cancelas rediccion
   e.preventDefault();
// codigo para lanzar animacion css, etc.
  console.log("tu efecto aqui")
   $("#login").show( "slow" );

});
/* ---------- GENERAL ---------- */

* {
  box-sizing: inherit;
}



input {
  background-image: none;
  border: none;
  font: inherit;
  margin: 0;
  padding: 0;
  transition: all .3s;
}


/* ---------- ALIGN ---------- */

.align {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


/* ---------- GRID ---------- */

.grid {
  margin-left: auto;
  margin-right: auto;
  max-width: 500px;
  max-height: 500px;
  width: 80%;
}


/* ---------- LOGIN ---------- */

#login h2 {
  background: #0088a3;
  border-radius: 15px 15px 0 0;
  color: #fff;
  font-size: 28px;
  padding: 20px 26px;
  height: 100%;
}

#login h2 span[class*="fontawesome-"] {
  margin-right: 14px;
}

#login fieldset {
  background: #fff;
  border-radius: 0 0 10px 10px;
  padding: 20px 26px;
}

#login fieldset p {
  color: #777;
  margin-bottom: 14px;
}

#login fieldset p:last-child {
  margin-bottom: 0;
}

#login fieldset input {
  border-radius: 3px;
}

#login fieldset input[type="text"],
#login fieldset input[type="password"] {
  background: #eee;
  color: #777;
  padding: 4px 10px;
  width: 100%;
}

#login fieldset input[type="submit"] {
  background: #0088a3;
  color: #fff;
  display: block;
  margin: 0 auto;
  padding: 4px 0;
  width: 100px;
}

#login fieldset input[type="submit"]:hover {
  background: #0088a3;
  border-radius: 15px 2px;
  cursor: pointer;
}

#login fieldset input[type="submit"]:active {
  background: #0088a3;
  border-radius: 2px 15px;
  cursor: wait;
}

@import "compass/css3";
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

 fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  -webkit-animation-name: fade-in;
  -webkit-animation-duration: .5s;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 1s;
}

.background-image.visible {
  opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form id="form1" method="post">  
      <input type="submit">
    </form>
    
      <div id="login" style="display:none">

        <h2><img src="images/banner-wh.png" alt="Logo" style="max-width: 100%; width: auto;"></h2>

        <form id="loginform" action="validarcode.php" method="POST" autocomplete="off">

          <fieldset>

            <p><label for="usuario">Usuario</label></p>
            <p><input type="text" name="txtusuario" id="usuario" autofocus></p>

            <p><label for="password">Contraseña</label></p>
            <p><input type="password" name="txtpassword" id="password"></p>

            <br><br>

            <p><input class="with-arrow" type="submit" name="Enviar" value="Ingresar"> <i class="icon-arrow-right"></i> </p>

            <br>

            <div style="font-size: 14px;color: #444;">¿Olvidó su contraseña?</div>
            <h1 style="font-size: 12px;color: #555;">Escríbanos a <a href="mailto:[email protected]?subject=Restablecer%20Contraseña">[email protected]</a></h1>

          </fieldset>

        </form>

      </div>

3
  • Gracias Joel :) pero creo con esto tendría un doble redireccionamiento, un paso adicional antes de mandarme a la página de ingreso
    – LauraZ
    Commented el 10 jul. 2019 a las 18:46
  • Vale Joel, me ha quedado más claro con la edición de @jacknavarow voy a revisarlo
    – LauraZ
    Commented el 10 jul. 2019 a las 18:58
  • @LauraZ agrege el efecto de tu ejemplo Commented el 10 jul. 2019 a las 18:59

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.