Inicio Apuntes FPApuntes DAM Intro de Star Wars, cómo crear una usando HTML y CSS

Intro de Star Wars, cómo crear una usando HTML y CSS

Publicado por entreunosyceros

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.

lubrico Wars

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.

body, html{
  height: 100%;
  min-height: 100vh;
  margin: 0px;
}

.star-wars-intro {
  background: url("img/stars-bg.jpg") center center;
  width: 100%;
  height: 100%;
  font-family: "Droid Sans", arial, verdana, sans-serif;
  font-weight: 700;
  color: #EBD71C;
  background-color: #000;
  overflow: hidden;
  position: relative;
  
}

/* TEXTO INTRO*/
.star-wars-intro p.intro-text {
  position: relative;
  max-width: 16em;
  font-size: 200%;
  font-weight: 400;
  margin: 20% auto;
  color: #4ee;
  opacity: 0;
  z-index: 1;
  text-align: center;
  -webkit-animation: intro 2s ease-out;
  -moz-animation: intro 2s ease-out;
  -ms-animation: intro 2s ease-out;
  -o-animation: intro 2s ease-out;
  animation: intro 2s ease-out;
}

p.intro-text{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  border: none;
  font: normal 48px/normal "Warnes", Helvetica, sans-serif;
  color: rgba(255,255,255,1);
  text-decoration: normal;
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  white-space: pre;
  text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #00ff2a , 0 0 70px #ff00de , 0 0 80px #ff00de , 0 0 100px #ff00de ;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
}

/* CONTENIDO TEXTO*/
.star-wars-intro .main-content{
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  z-index: 3;
  width: 100%;
  height: 50em;
  bottom: 0;
  font-size: 80px;
  font-weight: bold;
  text-align: justify;
  overflow: hidden;
  transform-origin: 50% 98%;
  transform: perspective(525px) rotateX(25deg);
}

.star-wars-intro .main-content:after {
  position: absolute;
  content: ' ';
  top: 0;
  bottom: 60%;
  background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
  pointer-events: none;
}

/* BOTÓN*/
.star-wars-intro .space-button {
  color: #EBD71C;
  border: 12px solid #EBD71C;
  padding: 20px;
  background: transparent;
  text-decoration: none;
  margin: 0 auto;
  display: block;
  text-align: center;
}

.star-wars-intro .space-button:hover {
  background-color: #D2BE03;
  border-color: #D2BE03;
  color: black;
}

.star-wars-intro .space-button:active,
.star-wars-intro .space-button:focus {
  background-color: #B8A40A;
  border-color: #B8A40A;
  color: black;
}  

.star-wars-intro .title-content {
  position: absolute;
  top: 100%;
  animation: scroll 150s linear 4s forwards;
}

.star-wars-intro .title-content > .content-header {
  text-align: center;
}

#theend{
  text-align: center !important;
  color: red;
  font-weight: bold;
}

/* IMÁGENES */

#logo-scroll{
  text-align: center !important;
}

.star-wars-intro .main-logo {
  position: absolute;
  width: 2.6em;
  left: 50%;
  top: 20vh;
  font-size: 10em;
  text-align: center;
  margin-left: -1.3em;
  line-height: 0.8em;
  letter-spacing: -0.05em;
  color: #000;
  text-shadow: -2px -2px 0 #EBD71C, 2px -2px 0 #EBD71C, -2px 2px 0 #EBD71C, 2px 2px 0 #EBD71C;
  opacity: 0;
  z-index: 1;
  -webkit-animation: logo 5s ease-out 2.5s;
  -moz-animation: logo 5s ease-out 2.5s;
  -ms-animation: logo 5s ease-out 2.5s;
  -o-animation: logo 5s ease-out 2.5s;
  animation: logo 5s ease-out 2.5s;
}

.star-wars-intro .main-logo > img {
  max-width: 100%;
}

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

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

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

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

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


@-webkit-keyframes logo {
  0% { -webkit-transform: scale(1); opacity: 1; }
  50% { opacity: 1; }
  100% { -webkit-transform: scale(0.2); opacity: 0; }
}

@-moz-keyframes logo {
  0% { -moz-transform: scale(1); opacity: 1; }
  50% { opacity: 1; }
  100% { -moz-transform: scale(0.2); opacity: 0; }
}

@-ms-keyframes logo {
  0% { -ms-transform: scale(1); opacity: 1; }
  50% { opacity: 1; }
  100% { -ms-transform: scale(0.2); opacity: 0; }
}

@-o-keyframes logo {
  0% { -o-transform: scale(1); opacity: 1; }
  50% { opacity: 1; }
  100% { -o-transform: scale(0.2); opacity: 0; }
}

@keyframes logo {
  0% { transform: scale(1); opacity: 1; }
  50% { opacity: 1; }
  100% { transform: scale(0.2); opacity: 0; }
}

@keyframes scroll {
  0% { top: 100%; }
  100% { top: -170%; }
}

@media screen and (max-width: 720px) {
  .star-wars-intro .main-content {
    font-size: 35px;
  }
  .star-wars-intro .title-content {
    position: absolute;
    top: 100%;
    animation: scroll 100s linear 4s forwards;
  }
}

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.

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.