Un Banner con Video y Texto Animado HTML Y CSS

Un banner con video y texto animado

Hola a todos.

En esta nueva entrada les traigo pequeño tutorial sobre como crear un Banner con Video y Texto Animado html y css; pero esta vez animaremos el texto para que aparesca al finalizar el video.

Resultado final de este tutorial

Esta publicación forma parte de la category de Banners, en el que podrán encontrar otras publicaciones similares a esta que aquí presento.

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

Comenzando el Banner con Video y el texto en HTML

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 vacios.
<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.

banner con video y texto sin estilo
Resultado del codigo HTML

Agregando el estilo en CSS al Banner

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.

banner con video y texto con estilo
Resultado final con Estilo CSS en PC

Subscribete para estar al dia