AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.
Una vez más aquí. Hoy vengo a dejar un pequeño artículo por una conversación que mantuve justo ayer con un usuario, en la que me decía que necesitaba crear algo parecido a la intro de Star Wars para un ejercicio que tenía que hacer. Bueno, pues el caso es que esto se puede hacer utilizando un poco de HTML y CSS, con lo que podremos crear una intro de una forma bastante sencilla.
Supongo que lo complicado de esto es inclinar el texto y darle la animación necesaria para que suba hacia arriba, pero con algunas propiedades CSS se puede solucionar esto sin mayor complicación. Lo de añadirle música supongo que es un añadido que le he puesto yo al ejemplo este. Pero si no es necesaria para los propósitos que busca este usuario, puede quitársela muy fácilmente.
Intro de Star Wars con HTML y CSS
Para crear nuestra propia intro de Star Wars, parecida, que no exactamente igual, tan solo necesitaremos crear dos archivos.
El archivo HTML
Para crear esta intro, necesitaremos crear un archivo html, al cual vamos a llamar index.html. Dentro colocaremos el siguiente código, con el cual daremos la estructura a nuestra intro, y añadiremos el texto que queremos mostrar.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LubricoWars</title>
<!-- CSS -->
<link rel="stylesheet" href="LubricoWars.css">
</head>
<body>
<!-- Sonido -->
<audio autoplay>
<source src="sonido/musica1.mp3" type="audio/mpeg">
</audio>
<!-- Este es el lugar en el que aparecerá la intro -->
<div class="star-wars-intro">
<!-- Texto en azul del comienzo -->
<p class="intro-text">
Llega una historia de superación <br/>
en el W.C. a la hora de empujar
</p>
<!-- El logo aparecerá aquí -->
<h2 class="main-logo">
<img src="img/logo.png">
</h2>
<!-- El texto en scroll -->
<div class="main-content">
<!-- Título del scroll -->
<div class="title-content">
<p class="content-header">
Año 0,II<br/>
En algún lugar dentro de mi calcetín,<br/>
llega una aventura para celiacos <br/> y personas con tres pezones
</p>
<br>
<p class="content-body" id="logo-scroll">
<img src="img/logo.png">
</p>
<!-- Cuerpo del texto en scroll -->
<p class="content-body">
Después de años de silencio galáctico, la civilización está al borde de un nuevo castañazo con otra guerra, bajo la amenaza de ser lanzados los temibles Rayos Vallecanos. Ahora, con la Fuerza preparándose para despertar (<i>a eso de las siete AM</i>), la gentecilla de la Tierra busca consuelo en películas, pedicuras o GPS, sin saber a dónde ir.
</p>
<p class="content-body">
El pitufo gruñon busca su venganza sobre la civilización. Esos que buscan en todos los bolsillos y siempre encuentran lo que buscan en los calcetines. Debido a las tensiones escrotales gubernamentales, la falta de cereales mañaneros ha lanzado a los usuarios de crema hemorroidal a las trincheras. Todos ellos con poca gomina, mientras dicen pelear por un desayuno equilibrado, sin morzilla con tabasco.
</p>
<p class="content-body">
La lucha encarnizada ha comenzado a producir bajas entre los luchadores debido a una oclusión intestinal, producida por un desayuno con poca fibra. Por eso los que dicen que mandan en la galaxia, han comenzado a enviar seres (<i>casi humanos</i>) a rayas horizontales, con carnets de diferentes signos políticos a la batalla. Las diademas de flores inundan todos las fuentes de agua con gas, debido a los defenestrados por ponerse al sol sin protección.
</p>
<p class="content-body">
La guerra se ha diversificado en los diferentes escrotos sociales, lo cual deja un buen puñado de parados de larga duración. Estos sufren sarpullidos cuando se cruzan con los calletanos, por lo que se lanzan a saltar a la comba para combatir los síntomas de bajeza mental.
</p>
<p class="content-body">
Para terminar con este problema, el ser más superior de todos, busca enviar pintores de gotelé, con pajarita y bien armados de crema hidratante. Así buscan terminar con los problemas de lubricación en las negociaciones entre las partes (<i>más o menos íntimas</i>).
</p>
<br/>
<p class="content-body" id="theend">THE-END</p>
<br/>
<!-- Botón -->
<a href="https://entreunosyceros.net/about/" class="space-button" title="about entreunosyceros.NET" target="_blank">entreunosyceros.net</a>
</div>
</div>
</div>
</body>
</html>
Archivo CSS
Para darle los efectos necesarios para que esto se muestre como queremos, solo necesitaremos crear un archivo .css. Para este ejemplo yo lo he llamado LubricoWars.css. Como es evidente, cada uno puede cambiar el nombre de los archivos, pero que se acuerde de cambiar el nombre del archivo css en el archivo html.
Dentro del archivo solo es necesario pegar el siguiente código.
Y con esto ya tendrás una intro al estilo Star Wars. Si quieres ver la intro funcionando, puedes hacerlo en el siguiente link. Si quieres ver funcionando esta intro, puedes habilitar el sonido para que suene la banda sonora (cortesía de otro usuario). También quiero dejar claro, que las imágenes que se pueden ver en esta intro, cada usuario debe buscar las suyas.
Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web. Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace. Esto mejorará tu experiencia en este sitio web.
