Star Wars opening crawl from 1977

4 min read / May 19, 2013

Star Wars Opening Crawl from 1977 in CSS/HTML/JS

The original opening crawl

If you have no idea what I’m talking about… this is the original opening crawl from 1977:

youtube.com/watch?v=7jK-jZo6xjY

HTML

Let’s start with a very basic markup to recreate this with web technologies:

<article class="starwars">
  <audio preload="auto">
    <source src="https://s.cdpn.io/1202/Star_Wars_original_opening_crawl_1977.ogg" type="audio/ogg" />
    <source src="https://s.cdpn.io/1202/Star_Wars_original_opening_crawl_1977.mp3" type="audio/mpeg" />
  </audio>
  
  <section class="start">
    <p>
      Start <br> <span>Star Wars opening crawl</span> from 1977
    </p>
  </section>
  
  <div class="animation">
      <section class="intro">
        A long time ago, in a galaxy far,<br> far away…
      </section>
      
      <section class="logo">
        <svg></svg>
      </section>

      <section class="titles">
        <div>  
          <p>
            It is a period of civil war.
          </p>

          <p>
            During the battle, Rebel
          </p>

          <p>
            Pursued by the Empire's
          </p>
        </div>
      </section>
  </div>
</article>

SCSS

The next thing to do is to add some SCSS for the markup. But I’m just going to show the most important parts.

Sections

All sections have the same default properties.

section {
  position: absolute;
  top: 45%;
  left: 50%;
  z-index: 1;
}

Intro

It contains the famous sentence A long time ago, in a galaxy far, far away and is animated like this:

  1. Initial: hidden
  2. Show it and wait
  3. Final: hide it
.intro {
  opacity: 0;
  animation: intro 6s ease-out 1s;
}

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

After the intro is hidden, the SVG Star Wars logo kicks in.

commons.wikimedia.org/wiki/File:Star_Wars_Logo.svg

The animation goes like this:

  1. Initial: hidden
  2. Scale (big) & show it
  3. Keep showing it and scale it down
  4. Final: hide it
.logo {
  opacity: 0;
  animation: logo 9s ease-out 9s;
}
  
@keyframes logo {
  0% { 
    transform(scale(2.15)); 
    opacity: 1; 
  }
  50% { 
    opacity: 1; 
  }
  100% { 
    transform(scale(.1)); 
    opacity: 0; 
  }
}

Titles

Shortly after the logo is hidden the titles come in. The titles itself is a wrapper element for the text:

  1. Place it at the bottom of the screen
  2. Justify the text
  3. Use a transform to rotate it

Then I apply an animation to the div child element (which contains the text):

  1. Initial: At the bottom of the screen and visible
  2. Move it up and keep it visible
  3. Final: Move it up and hide it
.titles {
  top: auto;
  bottom: 0;
  text-align: justify;
  transform-origin: 50% 100%;
  transform: perspective(300px) rotateX(25deg);

  > div {
    position: absolute;
    top: 100%;
    animation: titles 81s linear 13s;
  }
}

@keyframes titles {
  0% { 
    top: 100%; 
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% { 
    top: 20%; 
    opacity: 0;
  }
}

JavaScript

I’m going to use JS (with jQuery) to do some stuff:

Everything you want to know is in the comments.

StarWars = (function() {
  
  /* 
   * Constructor
   */
  function StarWars(args) {
    // Context wrapper
    this.el = $(args.el);
    
    // Audio to play the opening crawl
    this.audio = this.el.find('audio').get(0);
    
    // Start the animation
    this.start = this.el.find('.start');
    
    // The animation wrapper
    this.animation = this.el.find('.animation');
    
    // Remove animation and shows the start screen
    this.reset();

    // Start the animation on click
    this.start.bind('click', $.proxy(function() {
      this.start.hide();
      this.audio.play();
      
      // Add the div.animation to the dom
      this.el.append(this.animation);
    }, this));
    
    // Reset the animation and shows the start screen
    $(this.audio).bind('ended', $.proxy(function() {
      this.audio.currentTime = 0;
      this.reset();
    }, this));
  }
  
  /*
   * Resets the animation and shows the start screen.
   */
  StarWars.prototype.reset = function() {
    this.start.show();
    
    // Clone the div.animation
    this.cloned = this.animation.clone(true);
    
    // Remove it from dom
    this.animation.remove();
    
    // Overwrite the this.animation property with the cloned one
    this.animation = this.cloned;
  };

  return StarWars;
})();

Create a new instance

new StarWars({
  el : '.starwars'
});

Final result: my fan remake

Just click on Start Star Wars opening crawl from 1977 to watch it. Enjoy!

codepen.io/TimPietrusky/pen/AGrxGb

Star Wars Opening Crawl from 1977 in CSS/HTML/JS

Thanks goes to

Craig Buckler

His amazing article helped me to create this remake of the Star Wars opening crawl.
sitepoint.com/css3-starwars-scrolling-text

Mads Cordes & Jack Rugile

They improved my article and pointed out some bugs :D Thanks!

Disclaimer

This is just the work of a fan who loves Star Wars. Please don’t sue me :D

 since 1985
CC BY 4.0 | Legal