Cómo Añadir Texto Con Animación 'Bounce'

El día de hoy traigo un texto personalizable para colocarlo en cualquier parte de nuestra página web. Funciona con HTML y CSS por lo que será totalmente compatible con Blogger. La animación que viene por defecto para las letras es un rebote como el de este ejemplo:

Sewer Mods

Para utilizar estas animaciones, primero tienes que ir a la parte de Tema > Editar HTML de nuestra plantilla y buscamos la etiqueta </head> con ayuda del buscador del editor.

                Lo puedes activar con Ctrl + F

Una vez localizada la etiqueta, pega antes de ésta el siguiente código para el estilo de las letras.

<style>
@import url(https://fonts.googleapis.com/css?family=Erica+One);
h1#animacion-nt {
  cursor: default;
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  margin: auto;
  display: block;
  -webkit-animation: bounce .3s ease infinite alternate;
  font-family: &#39;Erica One&#39;, cursive;
  font-size: 80px;
  color: #ffffff;
  text-align: center;
  line-height: 100px;
  text-shadow: 0 1px 0 #CCC, 0 2px 0 #CCC, 0 3px 0 #CCC, 0 4px 0 #CCC, 0 5px 0 #CCC, 0 6px 0 transparent,
  0 7px 0 transparent, 0 8px 0 transparent, 0 9px 0 transparent, 0 10px 10px rgba(0, 0, 0, 0.6);
}

/* ANIMATION */
@-webkit-keyframes bounce {
  100% {
  top: -30px;
  text-shadow: 0 1px 0 #CCC, 0 2px 0 #CCC, 0 3px 0 #CCC, 0 4px 0 #CCC, 0 5px 0 #CCC, 0 6px 0 #CCC,
  0 7px 0 #CCC, 0 8px 0 #CCC, 0 9px 0 #CCC, 0 30px 30px rgba(0, 0, 0, 0.3);
  }
}
</style>

El texto marcado de azul corresponde al código de la fuente de texto que se va a utilizar.

Los valores marcados de verde corresponde a los colores empleados (en forma hexadecimal o rgba) tanto para el texto y sus sombras como para las sombras de la animación y sus reflejos. Cada uno de estos colores puedes cambiarlo por otro de tu gusto.

Los valores marcado de rojo corresponden a los siguientes elementos:
Left: distancia del margen izquierdo (en píxeles).
Right: distancia del margen derecho (en píxeles).
Top: distancia del margen superior (en píxeles).
Bottom: distancia del margen inferior (en píxeles).
Height: altura del texto (si lo modificas, debes asignar el mismo valor para la altura del código del siguiente ejemplo)
Font-size: tamaño del texto (en píxeles).
Webkit Animation Bounce: velocidad de la animación.

Lo siguiente será buscar el lugar de nuestra web donde pondremos nuestro texto. En mi caso, lo he estado utilizando una temporada como imagen con movimiento para la cabecera del blog, pero también se puede insertar en páginas, entradas e incluso gadgets.

Pues bien, para acomodarlo en la cabecera, busca la etiqueta <header> y justo encima pega este código.

<div style='position:relative; height:100px; margin-bottom:20px;'>
            <h1 id='animacion-nt'> ...Aquí va el texto que desees... </h1>
            </div>

Para cambiar el tipo de fuente del texto, accederemos a Google Fonts y buscaremos la tipografía deseada. Una vez escogida la fuente, damos click en +Select this style.

Se abrirá una ventana en la parte derecha del navegador titulada Selected Family. Acto seguido, entramos en la segunda pestaña llamada Embed y copiamos los dos códigos que aparecen al hacer click en @import.

Ahora sustituiremos los dos textos marcados de color azul en el primer código de esta guía por los nuevos que hayamos elegido y que he marcado con cuadros azules en la captura de arriba.

AVISO: Recuerda copiar el primer código sin la etiqueta <style> como se muestra en la imagen superior, debido a que ya la insertamos previamente en el Editor HTML de nuestra plantilla gracias al primer código de esta guía.

Una vez hecho todo, guarda los cambios y comprueba que se aplicaron correctamente tanto el texto como su correspondiente efecto. Si te aparece el título o descripción de tu blog superpuesto al texto animado que recién insertamos en la cabecera, échale un vistazo rápido a esta guía para ocultarlos y así resolver este molesto error. Aquí debajo te dejo una imagen para que veas como quedaría.