CSS3 es una tecnología muy poderosa que nos permite crear muchos proyectos increíbles.
En este artículo recrearemos la apertura de Star Wars utilizando CSS3 y Sass. Para ello aplicaremos conceptos como animaciones y transiciones en CSS, además de usar recursos de Sass muy interesantes, como el uso de variables por ejemplo.
Preparando el Ambiente
Para comenzar vamos a instalar Sass para que podamos utilizarlo en nuestro proyecto. Vamos a utilizar Node para ello.
Será necesario iniciar un nuevo proyecto en Node para realizar esta instalación. Así, ejecutaremos npm init -y para crear un nuevo proyecto. Este comando también creará un archivo llamado package.json, donde estarán almacenadas nuestras dependencias, así como los scripts que podemos ejecutar en nuestro proyecto.
Ahora vamos a instalar Sass, utilizando el comando npm install sass --save-dev.
Con Sass instalado, añadiremos un nuevo script en el archivo package.json. Este script se llamará sass y ejecutará el siguiente comando:
sass sass:css --watch
Este comando de Sass es el responsable de seleccionar nuestros archivos en Sass, que estarán dentro de una carpeta llamada “sass”, y convertirlos en archivos CSS, que el navegador puede leer. Estos archivos finales estarán en una carpeta llamada “css”.
Después de realizar esta configuración inicial, estamos listos para comenzar el desarrollo de la apertura. Podemos decir que esta apertura consiste en tres partes principales: 1) la famosa frase “Hace mucho tiempo, en una galaxia muy, muy lejana...”, 2) el logo de la franquicia apareciendo y avanzando en el eje de profundidad hasta desvanecerse y por último 3) un letrero que informará una introducción sobre lo que tratará la película. Vamos a crear un código HTML y CSS con Sass para cada uno de estos componentes.
Frase “Hace mucho tiempo atrás”
Creando estructura HTML
La etiqueta que englobará todo el contenido de nuestra introducción será una etiqueta main. Dentro de ella, crearemos una sección con id “long-time-ago”, que contendrá la frase introductoria:
<section id="long-time-ago">
<h2>Hace mucho tiempo, en una galaxia muy, muy lejana...</h2>
</section>
Creando estilos CSS con Sass
Después de esto, vamos a definir los estilos CSS que compondrán este elemento.
Será necesario dejar el fondo de nuestra pantalla completamente oscuro, así como es común en las películas de la saga. Para ello, usaremos el siguiente código:
body {
background-color: #000;
overflow: visible;
}
Luego, definiremos los estilos de la etiqueta main, dejando el código CSS de la siguiente manera:
main {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
user-select: none;
}
El estilo font-family se utiliza para definir cuál será el tipo de fuente que utilizaremos en la página. Además, el estilo user-select: none nos permite definir que el texto de las etiquetas no podrá ser seleccionado por el usuario.
Los estilos para la sección “long-time-ago” quedarán de esta manera:
#long-time-ago {
display: flex;
justify-content: center;
align-items: center;
color: #24E8EE;
width: 100%;
height: 100vh;
}
Con este código definimos que esta sección usará el Flexbox Layout como su display, ocupará toda la pantalla, tendrá en sus textos un color azul claro, típico de las películas, y alineará su contenido en el centro de su estructura, es decir, en el centro de la página.
Por último, necesitamos definir el estilo de nuestra etiqueta h2. Necesitará tener un ancho límite definido y también deberá tener un tamaño de fuente un poco mayor que el normal. Por eso, utilizaremos el siguiente código para definir sus estilos:
h2 {
width: 18em;
font-size: 300%;
}
Algo interesante que podemos notar es que, como estamos usando Sass, tenemos acceso al recurso de alineación de selectores y estilos, lo que facilita bastante organizar nuestros selectores. Nuestro archivo CSS incluso está de la siguiente manera:
Cuando actualizamos nuestra página, vemos el siguiente resultado:
Creando animación
Ahora que nuestros estilos CSS han sido definidos, necesitamos crear la animación de este componente. Esta animación implica mostrar la frase en la pantalla a través de una transición de desvanecimiento, y después de unos segundos ocultar la frase, utilizando la misma transición.
Cuando hablamos de animaciones que implican mostrar y ocultar elementos, puede que recordemos el estilo opacity. Vamos a utilizar la directiva @keyframes para crear una animación que definirá que al inicio de la animación, el estilo opacity del elemento estará como 0. Luego, cuando la animación alcance un cuarto de su duración, es decir, 25%, el opacity se volverá 1, para que el texto aparezca. Por último, cuando la animación esté cerca de su final, alrededor del 95%, volveremos a definir el opacity como 0 para que desaparezca. Nuestra animación quedará así:
@keyframes long-time-ago {
0% {
opacity: 0;
}
25%, 80% {
opacity: 1;
display: flex;
}
95% {
opacity: 0;
display: none;
width: 100%;
height: 100vh;
}
100% {
width: 0;
height: 0;
}
}
Ahora, solo falta realizar la llamada de esta animación en el elemento con el que estamos trabajando utilizando el estilo animation:
opacity: 0;
animation: long-time-ago 7s ease-out 1s forwards;
Definimos el opacity como 0 al inicio para que el elemento solo se muestre cuando la animación comience. Nota que la animación durará 7 segundos y esperará 1 segundo para comenzar, es decir, tendrá un retraso de 1 segundo.
Ahora, al actualizar nuestra página, veremos una pequeña animación de “emergencia” y “desaparición” del texto inicial.
Con esto, la primera parte de nuestra apertura está finalizada.
Logo Principal
Después de unos segundos en que las palabras iniciales son mostradas, el logo de la saga necesita aparecer en la pantalla y es en esta parte en la que vamos a trabajar ahora.
Creando estructura HTML
El logo será un SVG. Vamos a cargarlo en la página utilizando una etiqueta , pero podríamos insertarlo directamente en el código, no habría problema:
<img src="./assets/star-wars.svg" alt="Logo de Star Wars" id="star-wars-logo" />
Creando estilos CSS con Sass
Esta imagen necesitará ocupar básicamente todo el espacio disponible para ella. Para ello, utilizaremos el siguiente código:
#star-wars-logo {
width: 100%;
transform: scale(1.5);
}
Nota que también usamos el estilo transform: scale(1.5). Se usará para que el logo aparezca en la pantalla un poco más grande de lo normal y luego disminuya.
Nuestra página debería estar así:
Creando animación
La animación de este componente de la apertura implica mostrar el logo de la saga apareciendo desde las cuatro esquinas de la pantalla y luego ir disminuyendo su tamaño, profundizando en la pantalla, hasta desaparecer. Para realizar esta animación podemos trabajar con la escala del elemento, que definimos a través de la propiedad transform.
Para ello, utilizaremos el siguiente @keyframes:
@keyframes star-wars-logo {
0% {
transform: scale(1.5);
}
50% {
transform: scale(1);
}
95% {
transform: scale(0);
width: 100%;
display: none;
}
100% {
width: 0;
}
}
A través de él definiremos que la escala de la imagen comenzará en la animación con 1.5 y terminará con 0, es decir, desaparecerá.
Ahora, para realizar la llamada de esta animación en nuestro elemento, nos encontramos con dos cuestiones: 1) Nuestra imagen necesita estar oculta cuando la página cargue. 2) La animación del logo solo puede iniciar después de que la primera animación haya terminado. ¿Cómo podemos resolver estas situaciones?
1 - Para que la imagen comience oculta, basta definir una escala igual a 0, para que de hecho no aparezca en la pantalla:
display: block;
transform: scale(0);
Nota que definimos el display como block. Esto es necesario, ya que la propia animación cambiará su valor a none posteriormente.
2 - Para saber cuándo la animación del logo debe comenzar, basta saber cuándo termina la animación de la primera frase. Sabemos que la animación long-time-ago tiene una duración de 7 segundos y un retraso de 1 segundo. De esta forma, podemos concluir que la animación star-wars-logo deberá esperar 8 segundos (7 + 1) para iniciar sin que haya un conflicto entre las animaciones. Con esto en mente, solo debemos definir un retraso de 8 segundos en esta segunda animación.
No obstante, hay una manera de facilitar este proceso. Sass nos permite realizar la definición de variables en CSS. Con esto, es más fácil realizar operaciones y cambios en las variables posteriormente sin afectar el funcionamiento actual. Vamos a crear dos variables al inicio de nuestro código Sass. Para ello, basta usar el signo de $ (dólar) e informar el nombre de la variable junto con su valor:
$long-time-ago-duration: 7;
$delay: 1;
La primera variable contiene la duración de la primera animación, 7 segundos. La segunda variable contiene el retraso inicial, 1 segundo.
Ahora será necesario cambiar un poco la definición de la animación en el elemento con id “long-time-ago”:
animation: long-time-ago $long-time-ago-duration + s ease-out $delay + s forwards;
$delay: $long-time-ago-duration + $delay;
Con este cambio la llamada de los segundos de la animación está ocurriendo de acuerdo con el valor de las variables.
Además, en la segunda línea definimos un nuevo valor para la variable $delay, que pasará a contener el tiempo total de la animación. Usaremos esta información para definir el valor del retraso de la segunda animación y de cualquier otra animación que creemos en el futuro.
¿Mucho, no?
Ahora, volviendo a nuestra segunda animación, vamos a realizar su definición con este código:
$star-wars-logo-duration: 9;
animation: star-wars-logo $star-wars-logo-duration + s linear $delay + s forwards;
$delay: $star-wars-logo-duration + $delay;
Nota que el valor de la variable $delay fue redefinido una vez más para nuestra próxima animación.
Ahora, al acceder a nuestro proyecto, vemos el siguiente resultado:
La segunda parte de la apertura está finalizada.
Descripción del filme
Por último, llegamos a la última parte de nuestra apertura: el texto inicial que describe lo que sucederá en la película.
Creando estructura HTML
Este texto introductorio estará dentro de una nueva sección, que tendrá una div solo para el título de la película, y luego una secuencia de etiquetas de párrafo para cada una de las frases de la descripción:
<section id="intro-resume">
<div>
<div id="movie-title">
<h2>Episodio IV</h2>
<h2>UNA NUEVA ESPERANZA</h2>
</div>
<p>Es un período de guerra civil. Partiendo de una base secreta, naves rebeldes atacan y conquistan su primera victoria contra el perverso Imperio Galáctico.</p>
<p>Durante la batalla, espías rebeldes logran robar los planes secretos del arma decisiva del Imperio, la ESTRELLA DE LA MUERTE, una estación espacial blindada con suficiente poder para destruir un planeta entero.</p>
<p>Perseguida por los siniestros agentes del Imperio, la princesa Leia se apresura en regresar a casa a bordo de su nave estelar, protegiendo los planes robados que pueden salvar a su pueblo y restaurar la libertad en la galaxia...</p>
</div>
</section>
Creando estilos CSS con Sass
El código CSS de esta parte de nuestra apertura quedará de la siguiente forma:
#intro-resume {
display: flex;
justify-content: center;
> div {
color: #FFC500;
display: flex;
justify-content: center;
flex-direction: column;
max-width: 600px;
font-size: 200%;
text-align: justify;
transform: rotateX(35deg);
#movie-title {
text-align: center;
h2 {
font-size: 50px;
}
}
p {
font-weight: 700;
}
}
}
A través de este código definimos que vamos a usar el Flexbox Layout para distribuir los elementos en nuestra página, definimos el color dorado para la descripción de la película y el tamaño y peso de las fuentes.
Sin embargo, un estilo que queremos dar atención es el transform: rotateX(35deg). Es el responsable de dejar el texto inclinado en la página. Además, necesitamos cambiar la perspectiva del elemento que engloba toda esta animación, la etiqueta main. Así, añadiremos este código a su CSS:
perspective: 300px;
Ahora, al acceder a nuestro proyecto, vemos el siguiente resultado:
Está quedando bastante interesante, ¿no?
Creando animación
La animación de esta parte de la apertura implica exhibir el texto introductorio de la película desde la base de la página y subir con ese texto hasta que desaparezca. Para hacer esto, podemos usar otro recurso del estilo transform, el translateY. Es muy útil cuando deseamos mover un elemento en su eje vertical sin necesidad de alterar sus márgenes.
Pensando en esto, vamos a definir que al inicio este elemento tendrá el translateY como 80% y a medida que avance la animación su valor será disminuido:
@keyframes star-wars-intro {
0% {
transform: rotateX(35deg) translateY(80%);
}
100% {
transform: rotateX(35deg) translateY(-150%);
}
}
Específicamente en esta animación informaremos los valores de duración y retraso de manera fija:
transform: rotateX(35deg) translateY(85%);
animation: star-wars-intro 120s linear 11s;
Ahora, al acceder al proyecto, después de ver las dos animaciones ya configuradas, podemos ver que la descripción de la película también está apareciendo:
Con esto, llegamos al final de nuestra animación usando HTML5 y CSS3 con los superpoderes de Sass.
No obstante, podemos implementar algunos recursos adicionales que pueden hacer nuestra experiencia aún mejor. Para esto, vamos a necesitar utilizar JavaScript.
Usando JavaScript para agregar audio
Sabemos que además de la apertura en sí, podemos aprovechar el tema de Star Wars al inicio de cada película. Vamos a añadir esto a nuestro proyecto también.
Pero, antes de eso, vamos a crear un botón que iniciará la animación que desarrollamos solo cuando hagamos clic en él:
<div id="init-movie">
<button>Iniciar Película</button>
</div>
Su código CSS será el siguiente:
#init-movie {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
transition: opacity 1s linear;
> button {
border: 0;
background-color: #FFC500;
color: #000;
text-transform: uppercase;
padding: 20px;
font-size: 20px;
}
&amp;amp;:active {
border: none;
outline: none;
}
}
Estará de la siguiente manera en nuestro navegador:
Sin embargo, para que las animaciones no comiencen al acceder a la página, todas deben ser pausadas al inicio. Hay un estilo CSS que define esto. Se llama animation-play-state. Sin embargo, podemos definir este valor de manera resumida, a través del estilo animation en nuestro archivo CSS:
animation: long-time-ago $long-time-ago-duration + s ease-out $delay + s forwards paused;
animation: star-wars-logo $star-wars-logo-duration + s linear $delay + s forwards paused;
animation: star-wars-intro 120s linear 11s paused;
Ahora, usando JavaScript, vamos a crear un evento de clic en el botón recién creado y definir que al ocurrir este evento, todas las animaciones se inicien:
const initMovieBtn = document.querySelector("#init-movie > button");
const body = document.querySelector("body");
initMovieBtn.addEventListener("click", (event) => {
const parentElement = event.path[1];
window.scrollTo(0, 0);
body.style.overflow = "hidden";
parentElement.style.opacity = 0;
parentElement.style.display = "none";
document.querySelectorAll("#long-time-ago, #star-wars-logo, #intro-resume > div").forEach(el => {
el.style.animationPlayState = "running";
});
});
Finalmente, vamos a añadir al HTML una etiqueta audio que contendrá el tema de la saga:
<audio src="./assets/star_wars_theme.mp3"></audio>
Y usaremos JavaScript para seleccionar este elemento y comenzar a reproducirlo después de aproximadamente 7 segundos, que es cuando el logo aparece en la pantalla. Para definir esta espera de 7 segundos, utilizaremos la función setTimeout():
const audioEl = document.querySelector("audio");
setTimeout(() => {
audioEl.play();
}, 7500);
Con esto, al acceder a nuestro proyecto, podremos hacer clic en la pantalla y ver la animación iniciando junto con el tema de Star Wars.
Conclusión
Puedes comprobar el resultado final de este código haciendo clic aquí.
Esperamos que este artículo te haya ayudado a entender la lógica de las animaciones con CSS y muchos de los recursos que él nos ofrece, además de los recursos de Sass, que son realmente increíbles.
Nosotros explicamos cada uno de los estilos mostrados en este artículo con más detalles y otros ejemplos en nuestro curso Dominando CSS3 con Sass. No dejes de inscribirte en este curso para convertirte en un especialista en CSS.
Muchas gracias por haber leído. Fue tan divertido recrear la apertura de Star Wars que creo que veré alguna de las películas una vez más. Hasta el próximo artículo. :)