Tutorial animación CSS3 | Caja de Suscripción
Aprende a crear una animación CSS3 a tu caja de suscripción y consigue un atractivo efecto para tus visitantes.
Las animaciones CSS3 nos permiten crear un efecto de movimiento sin necesidad de utilizar Javascript. Básicamente las animaciones constan de dos componentes: un estilo que describe la animación CSS y un conjunto de fotogramas que indican su estado inicial y final, así como posibles puntos intermedios en la misma.
Pero no voy a liaros mucho y vamos a ver un ejemplo práctico de como implementar estas animaciones en CSS3.
El html
Antes de comenzar con nuestra animación CSS3 deberemos de crear nuestra plantilla en html.
<section class="container">
<section class="one">
<div class="logo">
<img src="https://image.flaticon.com/icons/svg/143/143361.svg">
</div>
<h2 class="heading">
Por favor suscríbete para obtener actualizaciones
</h2>
<p> Si quieres estar a la última suscríbete en mi blog.
</p>
<form>
<input type='text' placeholder="Introduce tu email"><br/>
<button class="btn" role="button">
Suscribirse
</button>
</form>
</section>
<section class="two">
<h3>
Gracias por tu suscripción!
</h3>
<div class="close">
</div>
</section>
</section>
Dando los estilos a nuestra página
A continuación vamos a crear los estilos a nuestro formulario de suscripción.
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
body, html{
background:#9c27b0;
font-family: 'Open Sans', sans-serif;
}
.container{
width:400px;
height:500px;
background:#fff;
margin:20px auto;
border-radius:4px;
text-align:center;
position:relative;
-moz-box-shadow: 0px 0px 28px rgba(0,0,0,.3);
-webkit-box-shadow: 0px 0px 28px rgba(0,0,0,.3);
box-shadow: 0px 0px 28px rgba(0,0,0,.3);
overflow:hidden;
}
.one , .two{
display:block;
height:500px;
width:400px;
margin:0px auto;
position:absolute;
-webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.one{
top:0;
background:#fff;
margin-top:20px;
}
.two{
top:500px;
background:#ffc107;
}
.two h3{
color:#fff;
padding-top:240px;
}
.container .logo{
width:40%;
height:auto;
display:block;
margin:20px auto;
}
.one .heading{
color:#607d8b;
text-transform:capitalize;
font-size:20px;
fonr-weight:900;
margin-top:40px;
}
.container p{
font-size:12px;
color:#b7b7b7;
font-weight:lighter;
text-transform:capitalize;
}
input[type='text']{
width:85%;
height:60px;
margin-top:20px;
margin-bottom:20px;
padding-bottom:-80px;
border:none;
border-bottom:3px solid #ffc107;
overflow:auto;
position:relative;
}
input[type='text']:active:focus,
input[type='text']:focus,
input[type='text']:hover{
outline : none;
font-size:20px;
}
input[type='text']:focus::-webkit-input-placeholder,
input[type='text']:active:focus::-webkit-input-placeholder
{
font-size:12px;
display:block;
-webkit-transform:translateY(-20px);
transform:translateY(-20px);
}
::-webkit-placeholder{
font-size:14px;
color:#b7b7b7;
text-transform:capitalize;
-webkit-transform:translateY(0px);
transform:translateY(0px);
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
::placeholder{
font-size:14px;
color:#b7b7b7;
text-transform:capitalize;
-webkit-transform:translateY(0px);
transform:translateY(0px);
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.one .btn{
width:85%;
background:#ffc107;
padding:15px;
border:none;
border-radius:5px;
font-size:14px;
color:#fff;
text-transform:capitalize;
font-family: 'Open Sans', sans-serif;
}
.one .btn:active:focus,
.one .btn:focus,
.one .btn:hover{
outline : none;
}
.one .btn:hover{
cursor:pointer;
}
.close{
position:relative;
top:0;
left:0;
display:block;
cursor:pointer;
}
.close:before{
content:"";
position:absolute;
top:-240px;
right:50px;
display:block;
width:22px;
height:3px;
background:#fff;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
.close:after{
content:"";
position:absolute;
top:-240px;
right:50px;
display:block;
width:22px;
height:3px;
background:#fff;
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
}
Animación CSS3 con Javascript
Para finalizar nuestro formulario de suscripción vamos a escribir un poco de código para animar nuestro formulario.
Animaciones en el navegador con Html5 y JavaScript
Al finalizar nos dará la opción de cerrar la ventana pulsando en la pestaña.
$(function(){
$('.one form .btn').on('click',function(){
$(this).parents('.one').animate({
top : '-500px'
},500);
$(this).parents('.one').siblings('.two').
animate({
top : '0px'
},500);
return false;
});
$('.two .close').on('click',function(){
$(this).parent().animate({
top : '-500px'
},500);
$(this).parent().siblings('.one').animate({
top : '0px'
},500);
return false;
});
});
Resultado Final:
Aquí os dejo el resultado final de nuestro formulario animado. Sin duda una manera elegante y profesional de agregar suscriptores a nuestra página.
Ver Demo Animación Cajas CSS3 by Antonio José (@ajmorales73) on CodePen.
Deja una respuesta
Muy interesante esta programación primero realizare los 25 y después lo demás
Gracias por compartir