In celebration of Star Wars day, I thought it'd be fun do walk-through how to recreate the movies intro with CSS animations. May the force be with you on this journey of learning.
Parts of the intro
We will focus on the three main parts of the into animation:
- The blue 'A long time ago..'.
- A shrinking Star Wars logo.
- The scrolling story text.
A long time ago...
The first part of the intro fades in and out the epic starting line of ever Star Wars movie.
Here is the starting HTML. It's just a simple div for the intro text.
Now we have to style it. I took a guess at the font color and found a similar font for the text.
Now to animate! There are two animations for this part of the intro. The text fades in on a black background, then fades out ~5 seconds later. We can achieve this by animating an opacity change. Fade in is done by animating opacity from 0 to 1 and fade out is the inverse.
Now these css classes by themselves do nothing. We do need to attach them to the intro div. We'll do this via Javascript.
Shrinking Logo
The next part of the intro displays a huge Star Wars logo and has it slowly shrink to nothing. I grabbed a nice SVG copy of the logo from Wikimedia.
Let's add the logo to the HTML. We will start it off as hidden.
Now we will add some small styling to add margins and ensure the logo is with width of the screen. The shrink animation is created using the scale CSS property. By scaling from 1.0 to 0 the logo will start huge and shrink into nothing.
We also have to add this to the Javascript to trigger it after the blue intro text.
Scrolling story text
This is the most complicated part of the intro. The original was done without computer animations. Lucky for us we don't have to resort to the type of tricks they needed in 1977 to animate this.
I'll add three divs to the HTML for the story text. The first to allow me to change the CSS perspective, the second to tilt backwards into the view and the third to allow me to scroll the text.
Here is what the styling looks like. I again guessed the text color and found a similar font.
The tilt effect is achieved by changing the perspective on the first div by 185px. Then to have the text scroll into the view, I use a rotate transform on the X axis of the tilt div. This gives a similar perspective to what we see in the movie intro. To get the text to scroll, the inner most div is positioned relatively. We can animate the scroll of it's top position. By changing the top value from 50 to -2000 over 60 seconds, we get a decent recreation of the intro scroll.
All that's left to do is add this to the javascript. I start the scroll just before the logo has fully shrunk as we see in the original movie intro.
I've checked the completed demo into github if you want to check it out: