Turns out I have this simple login, I handle Overhang.js to display a message in case the credentials are wrong. With this same plugin I could show a message when the access is correct, but among all its options, none of them completely convinces me (UI/UX issues).
For this case, when the access is correct, I would like to handle, for example, a change in the message of the inputtype submitthat goes from "Enter" to "Entering".
Or it could also be a fade effect like the Bootstrap modals that darkens the screen.
$(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>Long story short, I know that with JS I can display this alertby pressing the submit, but how could I call an animation in CSS instead?
function exito() {
alert("Ingresando...");
return true;
}<input class="with-arrow" type="submit" name="Enviar" value="Ingresar" onclick="return exito();">
This is an example with the code working, in this case I put an animation and an entering message before submitting the form, then you can modify that content as you like. Clicking on
Ingresarthe animation will show 4 seconds (below I explain how to change that time) and then the form will be submitted.Explaining a little the solution of the example:
You must first change the
<input type="submit" value="Ingresar">to a<a>Ingresar</a>to prevent the form from being submitted immediately and the animation can be seen.Luego debes crear una función de
enviar()para enviar el formulario luego de mostrar la animación.Luego debes colocar una función
animar()al<a>Ingresar</a>para que se muestren las animaciones al hacer click enIngresar.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: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.Y eso fue lo que se hizo a grandes rasgos. Espero te sea de ayuda. Saludos.
I think you could use javascript: first you change the normal behavior of the form, avoiding the redirection, then you launch the animation you need and then you do the redirection from javascript. You could even trigger the redirect based on a certain condition. Example.
html form: