articles on

Star Wars in CSS

Star Wars in CSS

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. Fabio Sasso I’m a Brazilian graphic and web designer based in San Francisco, California. Currently working for Google, I am also the founder of Abduzeedo, a personal project that has become the biggest promoter of my work. Abduzeedo is now one of the design world’s most sought after blogs for design inspiration and tutorials. Over the years I have had the amazing honor to work on projects for web and print media as well for clients such as MSNBC, Wired UK, Adobe, Digital Arts Magazine and Abril among others. In 2011 I joined Google as senior designer at the Mountain View headquarters. For over 2 years I have had the opportunity to work on incredible projects, from Doodles and icons to major products like Google Wallet, Offers, Shopping, Currents, Ventures and others. Currently I am part of the Search/Knowledge team working with amazing people. 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. article{ height: 100%; overflow: scroll; font-size: 32px; height: 100%; -webkit-transform: rotateX(45deg); -moz-transform: rotateX(45deg); transform: rotateX(45deg); } Step 4 To move the text off the screen we will use "TranslateY" for the paragraphs. article p{ -webkit-transform: translateY(800px); -moz-transform: translateY(800px); transform: translateY(800px); padding: 0 20%; } 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. @-webkit-keyframes txtmove { 0% { -webkit-transform: translateY(800px); } 100% { -webkit-transform: translateY(-1400px); } } 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. article p{ -webkit-transform: translateY(800px); -moz-transform: translateY(800px); transform: translateY(800px); -webkit-animation: txtdmove 70s linear 3s 1; -moz-animation: txtdmove 70s linear 3s 1; animation: txtdmove 70s linear 3s 1; padding: 0 20%; } 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. Demo - Save from the browser to download it