The Digital Mike

Hola todos. Muchas veces queremos mostrar un banner en el que deseamos presentar un producto usando un video acompañado de un texto de llamada de acción. Quizas tienes un boceto creado pero no tienes idea de como hacerlo usando HTML. Pues, haz llegado al lugar exacto, porque aquí, en esta nueva entrada les traigo pequeño tutorial sobre como hacer un Banner HTML con Video y Texto Animado. En el que vamos a animar el texto para que aparezca al finalizar el video.

Sin mas, aqui te dejo el como crear este banner que puedes usar como hero banner, en tus paginas.

Para comenzar con esta entrada sobre como crear un banner con video y texto animado html y css, vamos a crear un HTML que va a contener el video y el texto que podemos usar como Llamada de Accion (Call to Action).

• Primero creamos el contenedor con los espacios vacíos.

<section>
  <video src=""></video>
  <div>
    <h1><b></b></h1>
    <p></p>
    <a><label></label></a>
  </div>
</section>

• Segundo vamos a agregar las clases y estilos a utilizar. (texto a agregar en rojo)

<section class="secbanner">
  <video src="" autoplay style="width:100%"></video>
  <div>
    <h1 class="slideup" style="animation-delay: 3s;"><b></b></h1>
    <p class="slideup" style="animation-delay: 4s;"></p>
    <a class="slideup" style="animation-delay:5s;" href="#"><label style="background:#ce2032; border-color:#ce2032; height: 44px; color: white; min-width: 152px; text-align:center; border-radius:3px; font-size: 16px; padding: 10px; font-weight: 700;"></label></a>
  </div>
</section>

• Tercero: Agregaremos ell contenido. (nuevo texto en rojo)

<section class="secbanner">
  <video src="video.mp4" autoplay style="width:100%"></video>
  <div>
    <h1 class="slideup" style="animation-delay: 3s;"><b>Titulo del Banner</b></h1>
    <p class="slideup" style="animation-delay: 4s;">Texto de promocion para el banner</p>
    <a class="slideup" style="animation-delay:5s;" href="#"><label style="background:#ce2032; border-color:#ce2032; height: 44px; color: white; min-width: 152px; text-align:center; border-radius:3px; font-size: 16px; padding: 10px; font-weight: 700;">Copmrame Ahora</label></a>
  </div>
</section>

Si previsualizamos la pagina en estos momentos, veremos algo como esto, pplano y sin estilo, solo mostrando el contenido que vamos a utilizar.

El estilo centrara el texto en pantallas menores de 768px, en escritorios, tendra una posicion absoluta que formara parte agregada del video. La animacion solo sera ejecutada en pantallas mayores de 768px por lo que @keyframe estara declarado dentro del @media screen. La animacion sera general, apareciendo el texto de abajo hacia arriba con opacidad. Ademas, cada texto tendra un tiempo de retardo personalizado el cual agregamos anteriormente en la parte HTML.

<style>
        .secbanner{margin: 30px 0; position: relative;}
        .secbanner>div{text-align: center;}
        .secbanner>div h1{font-size: 30px; text-shadow: 0 0 3px white;}
        .secbanner>div p{font-size: 18px; text-shadow: 0 0 3px white; font-weight: 700;}
        @media screen and (min-width:768px){
            .secbanner>div{position: absolute; top: 60%; left: 5%; margin: 0; text-align: left; transform: translate(-5%,-60%);}
            .secbanner>div h1,.secbanner>div p, .secbanner>div a{animation: slideup 1s forwards 1; opacity: 0;}
            @keyframes slideup{
                from{transform: translate(-5%, -0%); opacity: 0;}
                to{transform: translate(-5%,-100%);opacity: 1;}
            }
        }
    </style>

El resultado sera de un video que, una vez terminado, sera mantiene abierto y luego ejecuta el texto.