One of the most memorable opening credits of all time has to be the Star Wars text scrolling in a 30-45deg perspective towards the horizon. It’s a classic and it has been subject to all sorts of exercises and tutorials. I have never done anything related to this but last Friday while playing with CSS I was inspired to create the same effect for my personal site. The result is what I want to share with you today. The only thing missing is the theme music so feel free to add that to your own personal effort.
So in this little tutorial, I will walk you through the process of creating the Star Wars opening credits effect using CSS and CSS animations only. I used Javascript for other details, but the rolling text effect is just CSS.
Step 1
The first thing to do is to get the content of your HTML page. I used the content of my personal site. Basically the site contains a Header and a Section for the text. Below you an see the final HTML.
Step 2
Let’s start adding some style to the design. We need to make sure that the background is black, the font is San-Serif and that we will use 100% of the height and width. Let’s also set the perspective of our design. To do that let’s add “-webkit-perspective:300” to the “section” tag.
Step 3
Now let’s add the text. I enclosed the text in a “article” tag and used “P” tag for each paragraph. To make the text fly in that perspective we will rotate the “article” tag. Then we can move the paragraphs in the Y position via “translate”. Here’s the CSS.
Step 4
To move the text off the screen we will use “TranslateY” for the paragraphs.
Step 5
Now let’s create the animation. Below you can see the code, it’s basically moving the paragraphs in the Y axis from the bottom to the top of the screen.
Step 6
With the Keyframe animation creaed, we will have just to assign it to the element we want to animate. In our case, the “article p” or the paragraphs inside the “article” tag. The animation will last 70 seconds, and it will have a 3s delay. The timing function will be linear so it animates at the same speed from the start to end.
Conclusion
The animation is done, now you can add more elements in your composition, like stars or your logo. Below you can see the final result and you can also download the files if you want to tweak it.
