DEV Community

loading...
Cover image for Developing the Star Wars opening crawl in HTML/CSS

Developing the Star Wars opening crawl in HTML/CSS

Christopher Kade
Web consultant @ZenikaIT // I sometimes record podcasts, build things and write about the web πŸ‘‹
・4 min read

Even though Star Wars: The Last Jedi is a divisive movie (which is not the point of this article, I promise), it inspired me to develop the most useless thing of all: the franchise's famous opening crawl using solely HTML, CSS and a little bit of Javascript (but for a cool reason).

The crawl contains 5 essential elements:

  • The background
  • The intro phrase
  • The logo
  • The text
  • The music

I'll simply go through the necessary steps, from building each element to some final touches such as adding John Williams' famous track.

Step 1: Creating the background

Let's do something a bit more original than adding a picture of space. Let's generate stars randomly !

JS:

// Sets the number of stars we wish to display
const numStars = 100;

// For every star we want to display
for (let i = 0; i < numStars; i++) {
  let star = document.createElement("div");  
  star.className = "star";
  var xy = getRandomPosition();
  star.style.top = xy[0] + 'px';
  star.style.left = xy[1] + 'px';
  document.body.append(star);
}

// Gets random x, y values based on the size of the container
function getRandomPosition() {  
  var y = window.innerWidth;
  var x = window.innerHeight;
  var randomX = Math.floor(Math.random()*x);
  var randomY = Math.floor(Math.random()*y);
  return [randomX,randomY];
}
Enter fullscreen mode Exit fullscreen mode

CSS:

body {
  margin: 0;
  background-color: black;
}

.star {
  position: absolute;
  width: 1px;
  height: 1px;
  background-color: white;
}
Enter fullscreen mode Exit fullscreen mode

Tada ! We now have a beautiful background to display the crawl on.

It looks like this (note that the stars on this picture are very hard to see as they are one pixel wide, but they'll look good once you actually implement them, you have my word):

space

Step 2: Adding the famous intro phrase

A long time ago in a galaxy far, far away....

Everyone has already heard, seen or whispered this phrase in their lifetime, so let's add it (with the necessary effects).

HTML:

...

<section class="intro">
  A long time ago, in a galaxy far,<br> far away....
</section>
Enter fullscreen mode Exit fullscreen mode

CSS:

...

/* Center it, set the color, size and hide the text */
.intro {
    position: absolute;
    top: 45%;
    left: 50%;
    z-index: 1;
    animation: intro 6s ease-out 1s;
    color: rgb(75, 213, 238);
    font-weight: 400;
    font-size: 300%;
    opacity: 0;
}

@keyframes intro {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
Enter fullscreen mode Exit fullscreen mode

Result:

intro

Step 3: Displaying the logo

The logo is vital to this opening sequence, here's how I added it.

HTML:

...

<section class="logo">
    <!-- SVG GOES HERE -->
</section>
Enter fullscreen mode Exit fullscreen mode

The SVG being a very long file, I have uploaded it here for you to copy and paste.

CSS:

...

/* Set the animation & hide the logo */
.logo {    
    position: absolute;
    top: 20%;
    left: 45%;
    z-index: 1;
    margin: auto;
    animation: logo 9s ease-out 9s;
    opacity: 0;
}

.logo svg {
    width: inherit;
}

/* Scale the logo down and maintain it centered */
@keyframes logo {
    0% {
        width: 18em;        
        transform: scale(2.75);
        opacity: 1;
    }
    50% {
        opacity: 1;
        width: 18em;      
    }
    100% {
        opacity: 0;
        transform: scale(0.1);
        width: 18em;        
    }
}
Enter fullscreen mode Exit fullscreen mode

And there we go, our beautifully animated logo:

logo

Step 4: Adding the scrolling text

It's probably the most essential part of the crawl but it's rather easy to implement.

HTML:

...

<!-- Change the text to your liking -->
<div id="board">  
  <div id="content">
    <p id="title">Episode I</p>
    <p id="subtitle">THE CODER'S MENACE</p>
    <br>
    <p>Turmoil has engulfed the Galactic Republic as Christopher Kade finishes studying to become a master in his trade.</p>    
    <!-- Add as many paragraphs as you want -->
    <!-- And make it cheesy ! -->
  </div>  
</div>
Enter fullscreen mode Exit fullscreen mode

CSS:

...

p {
  color: #FFFF82;
}

/* Set the font, lean the board, position it */
#board {
  font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
  transform: perspective(300px) rotateX(25deg);
  transform-origin: 50% 100%;
  text-align: justify;
  position: absolute;
  margin-left: -9em;
  font-weight: bold;
  overflow: hidden;
  font-size: 350%;
  height: 50em;
  width: 18em;
  bottom: 0;
  left: 50%;
}

#board:after {
  position: absolute;
  content: ' ';
  bottom: 60%;
  left: 0;
  right: 0;
  top: 0;
}

/* Set the scrolling animation and position it */
#content {
  animation: scroll 100s linear 16s;
  position: absolute;
  top: 100%;
}

#title, #subtitle {
  text-align: center;
}

@keyframes scroll {
    0% {
        top: 100%;
    }
    100% {
        top: -170%;
    }
}
Enter fullscreen mode Exit fullscreen mode

And there we go !

text

Final touch: the music

What would Star Wars be without its music?

Since we have timed our animations in advance, it should be a piece of cake !

First, download the following .mp3 file and add it to your project's assets.

Then, in our HTML file, add:

<audio preload="auto" autoplay>
  <source src="@/assets/audio/Star_Wars_original_opening_crawl_1977.mp3" type="audio/mpeg">
</audio>
Enter fullscreen mode Exit fullscreen mode

Which preloads the music as the page is loaded and plays it automatically.

And voilΓ , everything should work as expected.

Final thoughts

You can find the finished product on this codepen (without the music).

It's always fun to work on something random to explore the possibilities of vanilla web technologies. I hope this was a call to action for some of you and would love to hear all about it in the comments.

Thanks for reading,

Christopher Kade

Discussion (22)

Collapse
binarydigit profile image
Liz Rodriguez

Wow this is amazing - I can't wait to try it!

Collapse
diogomqbm_ profile image
Diogo Mafra

Nice post! Had to do some changes but I had some fun doing this!
Thank you!

Collapse
christopherkade profile image
Christopher Kade Author

I'm glad you liked it !

Collapse
robosnod profile image
robosnod

This is pretty amazing. How could I set the canvas size to fit the center of my website? I don't see any place in the code where it defines the width. If I wanted it to be 980px, where do I add that? Do I add it in the BG CSS?

Collapse
xelaflash profile image
xelaflash

Awesome men! I'm a learning webdev and this is a fun and good exercise.
I learned some new stuff in js and css thanks to you. πŸ™πŸΌπŸ™πŸΌπŸ™πŸΌ

You made my (hangover) day ! πŸ˜ƒ

Thanks men, do not hesitate to share other stuffs like that

Collapse
hydrogen2oxygen profile image
Peter

The final touch would be a complete Star Wars movie made with JS, hehehe!

Collapse
brianmituka profile image
Brian Mituka

I've been thinking about this a lot. Nice one!

Collapse
peter profile image
Collapse
keanamaral profile image
keanamaral • Edited

TTTTTTTTTTTHHHHHHHHHHAAAAAAAAAAANNNNNNNNKKKKKKKKKKKKK YYYYYOUUUUUUUUUU!!!!!!!!!!!
So much Chris!!!! I was so looking to be able to do this...THANKS! Got it working on my html

Collapse
guic1978 profile image
Guilherme Reis

ThatΒ΄s awesome man.

Collapse
smgardner59 profile image
Collapse
francisco profile image
Francisco M. Delgado

This was awesome, following and can't wait for more!

Collapse
praveen075 profile image
praveen075

Hahaha cool stuff . Loved it .

Collapse
nattyxd profile image
Nathaniel Baulch-Jones

This is so awesome

Collapse
kinkuraj profile image
Kinkuraj Sahoo

Nice one. Worth trying it. :)

Collapse
rapidtables1 profile image
rapidtables

Awesome Christopher, Amazing Work.. I have tested on HTML Formatter and loved it

Collapse
toshimitsusakai profile image
Collapse
nikhil1337 profile image
Nikhil Savaliya

The coding train 😝😝

Collapse
donatron profile image
Don Macarthur

Kick ass! Thank you so much for the great tutorial.
I'm working on a React App consuming the Star Wars API and this is great for the home page.

Love your work :-)

Collapse
dyocc profile image
Dyocc

Hey there! is there a way I can use another logo instead of the Star Wars logo?

Collapse
christopherkade profile image
Christopher Kade Author

Hey, absolutely, just replace the Star Wars SVG with your own

Collapse
casiimin profile image
Casi Imin

What about Star Wars without Star Trek?

liveweave.com/C23E1G#&togetherjs=K...

Forem Open with the Forem app