Tutorial animación CSS3 | Caja de Suscripción

animación css3
Table
  1. El html
  2. Dando los estilos a nuestra página
  • Animación CSS3 con Javascript
    1. Resultado Final:
  • 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.

    1. Adrian Hernandez dice:

      Muy interesante esta programación primero realizare los 25 y después lo demás
      Gracias por compartir

      1. DuNNe dice:

        ¡De nada!. Seguiré intentando aportar buen material para los amigos del blog. Un saludo y gracias por tu visita y comentario.

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

    Your score: Useful

    Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

    Go up