Blog

Imagen desapareciendo en espiral hacia el fondo

  • Eborio Linárez
  • November 20, 2012
  • 0

El ejemplo consiste en hacer que la imagen desaparezca en espiral hacia el fondo y una vez ésta haya desaparecido el resto de los elementos aparecerán desde la parte superior del contenedor. Además se coloca una máscara de color para que las letras sean más legible...

Leer completo

Aparición de los textos desde el frente

  • Eborio Linárez
  • November 19, 2012
  • 0

El objetivo del ejemplo es conseguir que los textos aparezcan desde el frente hasta posicionarse sobre la imagen, dando así la impresión que se van acercando hasta llegar a la posición deseada. Durante el movimiento de los textos se observan difuminados por el gran tamaño...

Leer completo

Desplazamiento lateral de la imagen y textos

  • Eborio Linárez
  • November 19, 2012
  • 0

Continuamos con el tutorial y ahora crearemos un ejemplo en donde aplicaremos un desplazamiento lateral tanto a la imagen como a los textos. Parecerá que la máscara junto con los textos empuja de derecha a izquierda la imagen hasta sacarla del contenedor. El HTML es el mismo utilizado...

Leer completo

Desvanecimiento de imagen y aparición de textos

  • Eborio Linárez
  • November 19, 2012
  • 0

Seguimos trabajando con el HTML básico publicado en el post HTML y CSS básicos para las transiciones para conseguir el efecto deseado que en este caso es hacer que la imagen se desvanezca hacia el fondo y luego desde el mismo sitio donde ésta se desvaneció aparezcan...

Leer completo

Máscara y textos entrando en forma giratoria

  • Eborio Linárez
  • November 19, 2012
  • 0

Nuevamente iniciamos con el HTML creado en el post HTML y CSS básicos para las transiciones para conseguir el efecto deseado sobre los elementos que se colocaran sobre la imagen de forma giratoria. La máscara entrará girando, luego el enlace desde abajo seguido del p&a...

Leer completo

Máscara y textos entrando en diagonal

  • Eborio Linárez
  • November 18, 2012
  • 0

En este ejemplo crearemos un efecto que permitirá que la máscara y los textos entren en diagonal hasta posicionarse sobre la imagen. Cada uno tendrá una dirección diferente para hacer más llamativo el ejemplo. Para comenzar este ejemplo debemos modificar un poco e...

Leer completo

Acercamiento de la imagen y aparición de los textos

  • Eborio Linárez
  • November 18, 2012
  • 0

En este primer ejemplo aplicaremos varios efectos. El primero es acercar la imagen un poco para destacarla. Luego se colocará una capa de color naranja sobre la imagen. Y finalmente se harán aparecer desde arriba el título, desde abajo la descripción y desde el centro el...

Leer completo

HTML y CSS básicos para las transiciones

  • Eborio Linárez
  • November 18, 2012
  • 0

Para comenzar el tutorial debemos crear el HTML y CSS básico para realizar las transiciones. En algunos ejemplos el HTML que crearemos en este post será modificado para lograr el efecto deseado sobre la imagen, pero en la mayoría de ejemplos utilizaremos exactamente el mismo. H...

Leer completo