Tictac Soluciones Informáticas > Diseño web > Texto Star Wars con transformaciones 3D y animación CSS3

Texto Star Wars con transformaciones 3D y animación CSS3

#textoStarwars{

color: #ebe41c;

font-size: 18px;

width: 100%;

-moz-transform-origin: 100px 200px;

-moz-animation: movimientoTexto 10s linear infinite;

-webkit-transform-origin: 100px 200px;

-webkit-animation: movimientoTexto 10s linear infinite;

-ms-transform-origin: 100px 200px;

-ms-animation: movimientoTexto 10s linear infinite;

transform-origin: 100px 200px;

animation: movimientoTexto 10s linear infinite;

}

#contenedorTexto{

background: #000;

padding: 0 20px 0 20px;

width: 300px;

height: 200px;

margin-left: auto;

margin-right: auto;

overflow: hidden;

-moz-perspective: 500px;

-moz-perspective-origin: 100px 200px;

-webkit-perspective: 500px;

-webkit-perspective-origin: 100px 200px;

-ms-perspective: 500px;

-ms-perspective-origin: 100px 200px;

perspective: 500px;

perspective-origin: 100px 200px;

}

@-moz-keyframes movimientoTexto {

0% { -moz-transform: rotateX(45deg) translateY(300px); }

100% { -moz-transform: rotateX(45deg) translateY(-400px); }

}

@-webkit-keyframes movimientoTexto {

0% { -webkit-transform: rotateX(45deg) translateY(300px); }

100% { -webkit-transform: rotateX(45deg) translateY(-400px); }

}

@-ms-keyframes movimientoTexto {

0% { -ms-transform: rotateX(45deg) translateY(300px); }

100% { -ms-transform: rotateX(45deg) translateY(-400px); }

}

@keyframes movimientoTexto {

0% { transform: rotateX(45deg) translateY(300px); }

100% { transform: rotateX(45deg) translateY(-400px); }

}

TRANSFORMACIÓN DE TEXTO

Este texto se desplaza por la pantalla utilizando una animación y una transformación en 3D. Emulando el inicio de las películas de la Guerra de las Galaxias con una rotación del eje x y un desplazamiento en el eje Y. Ya hemos visto en entradas anteriores como manejar animaciones CSS. Combinando estas animaciones con efectos 3D y un poco de estilado e imaginación es fácil hacer un efecto similar al de los letreros de inicio de las películas de la guerra de las galaxias.
El estilado es bastante básico, dos cuadrados, uno será el fondo, de un ancho fijo y fondo negro, centrado. El otro será donde esté el texto que se desplace sobre el primero, texto amarillo.
Tenemos que hacer una animación que mueva el texto verticalmente pero hacia el fondo, eso lo hacemos con un giro de 45 grados respecto al eje X. Aunque el giro es fijo (siempre 45 grados), debemos especificar este giro en los fotogramas clave de la animación, ya que forman parte de la misma propiedad CSS: transform. Aunque dentro de esa propiedad, deseemos que la rotación sea fija y la traslación sea la que se anime, hay que especificar ambas como parte de la animación, o la animación sobre-escribirá la propiedad que hayamos puesto fija. Supongo que esto sucede así, porque aunque lo especifiquemos como transformaciones independientes, en realidad realiza la interpolación de la animación sobre la matriz de transformación.
Especificamos los parámetros para que quede bien, como punto de perspectiva, la duración de la animación y que se repita infinitamente, y ya está. Este ejemplo (con prefijos) funcionará en Firefox, Chrome y Safari en sus últimas versiones. En Internet Explorer cuando salga la versión 10. Por ahora Opera no soporta las transformaciones 3D, la parte de animación funcionará, supongo que el texto simplemente subirá, sin sensación de profundidad.
El código completo es:
TRANSFORMACIÓN DE TEXTO
Este texto se desplaza por la pantalla utilizando una animación y una transformación en 3D. Emulando el inicio de las
películas de la Guerra de las Galaxias con una rotación del eje x y un desplazamiento en el eje Y.
2018-07-02T17:36:52+00:0023/07/2012|Diseño web, HTML5|

3 Comments

  1. Sara Illas Baizán 20/08/2012 en 16:16 - Responder

    Cumple su misión de sobra… genial… GRACIAS AMIGO..http://metalsurfing.blogspot.com/

  2. Anónimo 16/10/2012 en 06:49 - Responder

    Cómo va esto?

    "Copio contenido de otras páginas y lo pongo en la mía como propio cambiando 4 cosas para que no se note mucho?"

    • Luis Hijarrubia 16/10/2012 en 08:17 - Responder

      Hola Anónimo.

      Hay unas 100 implementaciones diferentes del texto de Star Wars en internet, la mayoría muy similares (es un texto amarillo que va al fondo), y muchas bastante más curradas que ésta. Cuando quise hacer este efecto busqué si ya estaba hecho y no encontré el código que quería, por ejemplo que funcionase bien restringido a un cuadro pequeño, así que la mayor parte de este ejemplo es de producción propia, si bien haya podido coger ideas de implementación de una decena de ejemplos diferentes, el código está escrito desde 0, por lo que no es ningún copia-pega.

      Aun así intentaré poner más referencias a las webs de donde saque ideas, sobre todo para que podáis ampliar la información con más ejemplos, ya que veo que tenéis interés en ello.

Deje su comentario