Create Star Wars Intro Crawl With Pure CSS – starwarsintro.css

Preview:

Description:

starwarsintro.css is a small CSS library which makes use of CSS3 animations to create the familiar Star Wars intro crawl effect on the webpage.

How to use it:

Download and place the stylesheet starwarsintro.css in the head section of the webpage.

<link rel="stylesheet" href="starwarsintro.css">

Add intro text into the webpage as follows:

<div class="star-wars-intro">
  <!-- Blue Intro Text -->
  <p class="intro-text">
    A few days ago, during...
  </p>
  <!-- Logo Image or Text goes in here -->
  <h2 class="main-logo">
    <img src="img/star-wars-intro.png">
  </h2>
  <!-- All Scrolling Content Goes in here -->
  <div class="main-content">
    <div class="title-content">
      <p class="content-header">StarWarsIntro.css<br>A New Crawl</p>
      <br>
      <p class="content-body">
        After years of galactic silence, civilization is on the brink of more Star Wars movies. Now, with the Force already awaken, the people of Earth seek solace in creating websites, memes, and presentations that need the intro crawl we've come to know and love. Make cooler stuff, faster, with our simple CSS library for the Star Wars Intro Crawl.
      </p>
      <br>
      <!-- button or link or whatever -->
      <a href="#welcome" class="space-button">Download StarWarsIntro.css</a>
        
    </div>
  </div>
</div>