How to create a Star Wars credits animation?

user_10941232 0
Viewed 259

I have this css animation of star wars credits. My problem is that animation is cut before the text ends.

Why can't I put all the text I want?

The animation speed only controls the scroll speed. And I don't see @Keyframes handling that.

My text is larger than the original. have more paragraphs. I don't really understand why this affects animation. In theory, shouldn't it be infinite?

body {
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  background: #000 url(https://cssanimation.rocks/demo/starwars/images/bg.jpg);
}

.fade {
  position: relative;
  width: 100%;
  min-height: 60vh;
  top: -25px;
  background-image: linear-gradient(0deg, transparent, black 75%);
  z-index: 1;
}

.star-wars {
  display: flex;
  justify-content: center;
  position: relative;
  height: 800px;
  color: #feda4a;
  font-family: 'Pathway Gothic One', sans-serif;
  font-size: 500%;
  font-weight: 600;
  letter-spacing: 6px;
  line-height: 150%;
  perspective: 400px;
  text-align: justify;
}

.crawl {
  position: relative;
  top: 99999px;
  transform-origin: 50% 100%;
  animation: crawl 60s linear infinite;
  /* velocidad del texto */
}

.crawl>.title {
  font-size: 90%;
  text-align: center;
}

.crawl>.title h1 {
  margin: 0 0 100px;
  text-transform: uppercase;
}

@keyframes crawl {
  0% {
    top: -100px;
    transform: rotateX(20deg) translateZ(0);
  }
  100% {
    top: -6000px;
    transform: rotateX(25deg) translateZ(-2500px);
  }
}
<div class="fade"></div>

<section class="star-wars">
  <div class="crawl">
    <div class="title">


      <p>Episodio XIII</p>
      <h1>LOS JEDIS ADVAITICOS</h1>
    </div>

    <p>En el planeta tierra un virus desconocido asusta a la población. Las hordas del imperio conspiranoico confinan a las personas en sus casas totalmente atemorizados. </p>

    <p>Fue entonces el momento perfecto para que un comando de la confederación interestelar comandado por una Sith holandesa decidiese secuestrar a Fernando Cain. Querían hacerle pagar su insolente falta de respeto.</p>

    <p>Fernando Cain no ejerció oposición. "La película de E.T tiene más metafísica que ustedes..." les dijo provocandoles.
    </p>

    <p>Su fiel amigo Jedi advaitico, FRAN SOLO, decide ir a su rescate... ...otra vez. Ya le salvó de una pelea en un bar con unos grises borrachos al meterse con ellos. "Hay que ser gilipollas... ...siendo expertos en ingeniería genética y se os olvida
      hibridaros un pene en condiciones.." </p>
    <p> FRAN SOLO recoje su nave oculta en las profundidades de la Gran Canaria y decide esta vez, por la peligrosidad de la misión, no ir solo en esta aventura de rescate. Decide buscar a los otros Jedis Advaiticos que se encuentran en los confines del universo
      transmitiendo sus conocimientos.</p>
    <p>JUAN QUENOVI estaba enseñando reiki a unas actrices porno en el planeta Xumino. El comandante ALEC CHEWBACCA practicaba sexo con doce valkirias interstelares cuando se enteró de la noticia. "Hecho unos cien polvos interestelares más y me uno a la
      aventura." dijo. </p>
    <p>FRAN mandó varios telemensajes interstelares. Uno a PABLO PADAWAN que estaba como siempre haciendo labores de diplomacia interestelar. Esta vez explicaba a los hummitas que el cerdo ahumado no era una provocación por parte de los humanoa s su raza
      </p>
    <p>A su vez, SERGIO REN enseñaba Astrología Saturniana en la universidad de Titan a unos seres de quinta dimensión. No se aclaraban en cuantos universos habian nacido simultáneamente. </p>
    <p>ALBERTO ORGANA y ANIBAL DAMERON estaban estudiando chamanismo pleyadiano en el planeta XJX-232 no teniendo claro su intervención. </p>
    <p>"Podmos hacerlo sin hacerlo, despersonalizadamente, si le salvamos, le salvamos, y sino no pasa nada, pasará lo que tenga que pasar y sino no pasará otra cosa" dijo el gran FRAN solo en un profundo mensaje. </p>
    <p>Convencidos todos, comenzaron una aventura trepidante y peligrosa. Los Jedis Advaiticos estaban juntos y nadie en el mundo les podría detener...</p>
    <p>...bueno... ..quizás habria que buscar un dulce toroíde de SERGIO REN para el camino...</p>
  </div>
</section>

css-animations css
1 Answers

You are overcomplicating the logic a bit as you don't need the use of translateZ() and top. You can do this with rotation and translateY.

I updated the code where I will rely on percentage value to make sure the text will be completed

Run the snippet on full page for better result

html {
  background: #000;
  overflow: hidden;
  background: #000 url(https://cssanimation.rocks/demo/starwars/images/bg.jpg);
}
html::before {
  content:"";
  position:fixed;
  left:0;
  right:0;
  top:0;
  min-height: 60vh;
  background-image: linear-gradient(0deg, transparent, black 75%);
  z-index: 1;
}

.star-wars {
  display: flex;
  flex-direction:column;
  justify-content: flex-end;
  align-items:center;
  height: 100vh;
  color: #feda4a;
  font-family: 'Pathway Gothic One', sans-serif;
  font-size: 500%;
  font-weight: 600;
  letter-spacing: 6px;
  line-height: 150%;
  perspective: 100px;
  text-align: justify;
}

.crawl {
  transform-origin: bottom;
  width:90%;
  animation: crawl 80s linear forwards; /* velocidad del texto */
}

.crawl>.title {
  font-size: 90%;
  text-align: center;
}

.crawl>.title h1 {
  margin: 0 0 100px;
  text-transform: uppercase;
}

@keyframes crawl {
  0% {
    transform:rotateX(20deg) translateY(100%);
  }
  100% {
    transform:rotateX(25deg) translateY(-100%);
    /* OR
    transform:rotateX(25deg) translateY(0%);
    if you want the text to stop at the bottom
    */
  }
}
<section class="star-wars">
  <div class="crawl">
    <div class="title">


      <p>Episodio XIII</p>
      <h1>LOS JEDIS ADVAITICOS</h1>
    </div>

    <p>En el planeta tierra un virus desconocido asusta a la población. Las hordas del imperio conspiranoico confinan a las personas en sus casas totalmente atemorizados. </p>

    <p>Fue entonces el momento perfecto para que un comando de la confederación interestelar comandado por una Sith holandesa decidiese secuestrar a Fernando Cain. Querían hacerle pagar su insolente falta de respeto.</p>

    <p>Fernando Cain no ejerció oposición. "La película de E.T tiene más metafísica que ustedes..." les dijo provocandoles.
    </p>

    <p>Su fiel amigo Jedi advaitico, FRAN SOLO, decide ir a su rescate... ...otra vez. Ya le salvó de una pelea en un bar con unos grises borrachos al meterse con ellos. "Hay que ser gilipollas... ...siendo expertos en ingeniería genética y se os olvida
      hibridaros un pene en condiciones.." </p>
    <p> FRAN SOLO recoje su nave oculta en las profundidades de la Gran Canaria y decide esta vez, por la peligrosidad de la misión, no ir solo en esta aventura de rescate. Decide buscar a los otros Jedis Advaiticos que se encuentran en los confines del universo
      transmitiendo sus conocimientos.</p>
    <p>JUAN QUENOVI estaba enseñando reiki a unas actrices porno en el planeta Xumino. El comandante ALEC CHEWBACCA practicaba sexo con doce valkirias interstelares cuando se enteró de la noticia. "Hecho unos cien polvos interestelares más y me uno a la
      aventura." dijo. </p>
    <p>FRAN mandó varios telemensajes interstelares. Uno a PABLO PADAWAN que estaba como siempre haciendo labores de diplomacia interestelar. Esta vez explicaba a los hummitas que el cerdo ahumado no era una provocación por parte de los humanoa s su raza
      </p>
    <p>A su vez, SERGIO REN enseñaba Astrología Saturniana en la universidad de Titan a unos seres de quinta dimensión. No se aclaraban en cuantos universos habian nacido simultáneamente. </p>
    <p>ALBERTO ORGANA y ANIBAL DAMERON estaban estudiando chamanismo pleyadiano en el planeta XJX-232 no teniendo claro su intervención. </p>
    <p>"Podmos hacerlo sin hacerlo, despersonalizadamente, si le salvamos, le salvamos, y sino no pasa nada, pasará lo que tenga que pasar y sino no pasará otra cosa" dijo el gran FRAN solo en un profundo mensaje. </p>
    <p>Convencidos todos, comenzaron una aventura trepidante y peligrosa. Los Jedis Advaiticos estaban juntos y nadie en el mundo les podría detener...</p>
    <p>...bueno... ..quizás habria que buscar un dulce toroíde de SERGIO REN para el camino...</p>
  </div>
</section>

user_86203330
Related