Animación de Star Wars con CSS3 y JavaScript

Por

Nestor Plasencia Prado

En este tutorial utilizaremos las propiedades animation, perspective, rotate y los KeyFrames de CSS3 para crear una animación de Star Wars.

Hoy nos adentramos al mundo de la fuerza y aprenderemos a crear la animación inicial clásica de todas las películas de Star Wars. Para ello haremos uso de la propiedades animation, perspective, rotate y los KeyFrames de CSS3. 

Empezaremos con las letras azules iniciales. En HTML creamos un elemento section con dos clases, una para la posición de nombre "intro" y otra, para el formato del texto con nombre "texto_intro". Dependiente de este elemento colocamos el texto inicial.

  Hace muchos megasegundos,
 en un servidor muy,
 muy remoto ...

En CSS, importamos una tipografía llamada "News Cycle".

@import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700);

Al elemento body, le agregamos un fondo de color negro y le retiramos todos los márgenes para estandarizar a los distintos navegadores.

body {
  margin: 0;
  background: #000;
  overflow: hidden;
}

Creamos la clase intro para el posicionamiento, con la keyword absolute sacamos del flujo al elemento, y con left y top con medidas relativas, en este caso porcentajes. Para superponerlo hacemos uso de la propiedad z-index.

.intro {
  position: absolute;
  top: 40%;
  left: 20%;
  z-index: 1;
}

Además creamos la clase "texto_intro" y utilizaremos la tipografía importada inicialmente. Agregamos el color celeste característico, asignamos el grosor de la letra de 400 y finalmente le damos a la separación de las letras una medida relativa (em).

.texto_intro {
  font-family: "News Cycle", sans-serif;
  color: #4bd5ee;
  font-weight: 400;
  letter-spacing: .1em;
}

El tamaño de las letras se asignarán de manera responsiva. Esto lo lograremos con JavaScript, pero primero obtenemos el ancho de la ventana.

var w = window.innerWidth;

Seleccionamos el elemento "intro" y lo almacenamos en una variable homónima.

var intro = document.getElementsByClassName("intro")[0];

A este elemento le asignamos el tamaño de letra con un valor proporcional al del ancho de la pantalla.

intro.style.fontSize = w / 30 + "px";

Finalmente, si la ventana cambia sus tamaños, los valores tienen que actualizarse.

window.addEventListener("resize", function() {
  w = window.innerWidth;
  intro.style.fontSize = w / 30 + "px";
});

Ahora continuaremos con la parte de la historia que tiene letras amarillas. Primero ocultamos el elemento anterior, agregando en la propiedad opacity un valor de 0.

En HTML, agregamos una nueva sección con la clase "párrafos". Dentro de esta, una división con la "historia", que al igual que en el anterior caso, será usado para el posicionamiento, y una clase "texto_historia" para los estilos de las letras. Dentro de este elemento agregamos los párrafos.

  
    Un grupo de jóvenes empezaron a elaborar videotutoriales en Youtube.
    Al ver que estos videos tenían gran acogida, crearon una plataforma para
        ofrecer cursos en español de desarrollo web y móvil.
    Esta plataforma fue lanzada en el 2014, así nació DevCode.la
 

En la clase "historia" de posicionamiento, solo sacamos al elemento del flujo, con position: absolute y la ubicamos verticalmente en el inicio. 

.historia {
  position: absolute;
  top: 0%;
}

Sin embargo a la clase "párrafos" aparte de la propiedad anterior, agregaremos las propiedades width y left para centrar el elemento. Para superponerlo hacemos uso de la propiedad z-index.

.parrafos {
  position: absolute;
  left: 15%;
  width: 70%;
  z-index: 1;
}

Para la clase "texto_historia" también usaremos la tipografía News Cycle con un color amarillo y un grosor de letra de 700. Además justificamos el párrafo, y con medidas relativas damos valores al grosor de línea y el espaciado entre letras.

.texto_historia {
  font-family: "News Cycle", sans-serif;
  font-weight: 700;
  color: #ff6;
  text-align: justify;
  letter-spacing: .1em;
  line-height: 1.1em;
}

En JavaScript obtenemos el alto de la ventana.

var h = window.innerHeight;

Luego seleccionamos los elementos de HTML "párrafos" e "historia".

var historia = document.getElementsByClassName("historia")[0];
var parrafos = document.getElementsByClassName("parrafos")[0];

El tamaño de letra del elemento historia también será proporcional al ancho de la ventana. Y el alto de todo el elemento párrafos proporcional al alto de la ventana.

historia.style.fontSize = w / 20 + "px";
parrafos.style.height = h + "px";

Finalmente en JavaScript agregamos las líneas anteriores al evento resize.

window.addEventListener("resize", function() {
  w = window.innerWidth;
  h = window.innerHeight;
  intro.style.fontSize = w / 30 + "px";
  historia.style.fontSize = w / 20 + "px";
  parrafos.style.height = h + "px";
});

Ahora para dar el efecto de las letras inclinadas haremos uso de la propiedad perspective y rotate, la primera indica la perspectiva con la que es visualizado un elemento en 3D y la segunda da una rotación en determinado eje, un determinado número de ángulos sexagesimales. Anterior a esto, cambiaremos el origen de las transformaciones al centro del elemento.

transform-origin: 50%;
transform: perspective(300px) rotateX(20deg);

Ya que la propiedad perspective, afecta a un elemento hijo, mas no al mismo elemento, ambas propiedades serán asignadas al elemento "párrafos".

Para ocultar el los párrafos, cambiamos el valor de la posición top de 0 a 80%;

.historia {
  top: 80%;
}

Ahora agregamos un botón que servirá para disparar el inicio de la animación, para ello agregamos el atributo onclick con la función animar.

Iniciar

En CSS, damos unos estilos básicos de un botón.

.botón {
  color: white;
  display: inline-block;
  margin: 10px;
  padding: 5px;
  border: 3px solid;
  border-radius: 5px;
  cursor: pointer;
}

En JavaScript creamos la función animar, esta función servirá para agregar dos nuevas clases una al elemento intro y la otra al elemento historia.

function animar() {
  intro.className = 'intro texto_intro animación_intro';
  historia.className = 'historia texto_historia animación_historia';
}

En CSS creamos estas dos clases que llamaran a su respectiva animación. Esta propiedad tiene 4 valores: El primero es el nombre de la animación, el segundo es el tiempo de duración, el tercero es la forma de la función de los efectos, y por último el tiempo de espera para el inicio de la animación. Controlando los tiempos de inicio, se crea una secuencia que una animación suceda luego de la primera.

.animación_intro {
  animation: intro 5s ease-out 0s;
}

.animación_historia {
  animation: parrafos 40s linear 6s;
}

Ahora agregamos los Keyframes. Para conocer el uso estos elementos te invito a revisar el tutorial Keyframes de CSS.

Para la primera animación, haremos una entrada y salida con desvanecimiento, para ello modificaremos la propiedad opacity.

@keyframes intro {
  0% {   opacity: 0; }
  20% {  opacity: 1; }
  90% {  opacity: 1; }
  100% { opacity: 0; }
}

Para la segunda animación agregamos una salida con desvanecimiento y con la propiedad top hacemos un desplazamiento de de inferior a superior.

@keyframes parrafos {
  0% {   top: 75%;
         opacity: 1; }
  95% {  opacity: 1; }
  100% { top: -70%;
         opacity: 0; }
}

Para darle más realismo agregaremos estrellas en el fondo, esto lo haremos con el background básico del tutorial Background animado de copos de nieve.

Y para agregar la pista de audio agregamos el elemento audio en HTML.

En JavaScript seleccionamos este elemento y lo reproducimos en la función animar.

var sonido = document.getElementById("sonido");

function animar() {
    sonido.play();
}

Si has llegado hasta aquí, estoy seguro de que deseas aprender mucho más de JavaScript y CSS3. Aprovecha nuestra promo especial y obtén un descuento en nuestra suscripción anual para obtener acceso a todos nuestros cursos durante todo el 2017. No olvides compartir el tutorial con tus amigos y dejarnos tus dudas u opiniones en la caja de comentarios.