Star Wars .. the famous title crawl using CSS3...

rogs

Well-known Member
With the new Star Wars film re-incarnating the saga - again! - I wondered how easy it would be to recreate the famous 'crawling' title sequence using HTML5 and CSS3.
These new variations of web page 'construction' tools allow for much easier animation than the earlier versions. And it's easy to edit and preview pages - in real time - with free HTML editors, before you 'write' the files as video clips using screen capture software (again, only using freeware).
So I had a go -- you can see the results here: http://www.jp137.com/lvs/StarWars.crawl.sample.mp4 (it's only about 20MB)

I think using HTML5 and CSS3 could offer some interesting variations for title sequences....or indeed other types of animation in video clips...

Has anyone else had a try at using CSS3 for video titles or animations?...
 

Member 55145

Distinguished Member
Interesting, although disappointing as I was hoping it was actually a rig you built.

If it's any consolation on the quality. If you watch the original crawl it wasn't perfect and has been fixed in subsequent years (If you didn't know)
 

rogs

Well-known Member
Interesting, although disappointing as I was hoping it was actually a rig you built.
You mean like this one? .. http://i.imgur.com/RlxNV.jpg :)

No, it was only a bit of fun..... I'd never found away of doing it using only free software before..
It's been done a million times using payware of course...and there's even an 'official' Star Wars site for making you own online version.
This was just something to try using CSS3 , which seems to offer some interesting options to add to video clips..
 

Member 55145

Distinguished Member
You mean like this one? .. http://i.imgur.com/RlxNV.jpg :)

No, it was only a bit of fun..... I'd never found away of doing it using only free software before..
It's been done a million times using payware of course...and there's even an 'official' Star Wars site for making you own online version.
This was just something to try using CSS3 , which seems to offer some interesting options to add to video clips..
Yea except that says Episode V :devil:

I used to do HTML programming in the early 00's, don't suppose you could tell me exactly what CSS3 is in a nutshell. Is it like Java?
 

rogs

Well-known Member
I have to admit I'm quite new to all this. There is a list of the important new features included in CSS3 here: CSS3 Introduction

The feature I was especially interested in for this project were the 2D/3D transforms. I'm only a complete beginner at writing HTML/CSS, and of course coming in 'late to the party' as it were, there are lots of things that can be done with the later versions that were not possible with the earlier ones. I don't think for example it would be possible to do something like the 'crawl' without using Javascript in earlier incarnations. You can do it in HTML5 and CSS3 without any Javascript at all.
Couple of other things that I found useful...

- I found that using the real time preview with this free editor made the process a whole lot easier.

- And of course because you are going to 'export' your final sequence as a video, you don't need to worry about browser compatibility when writing your scripts either. It only has to work with the preview browser (Chrome by default).

The actual scripts are very simple. I've attached the text versions of both the HTML and the CSS file for the actual 'STAR WARS' logo part of my sequence. As you can see, there's nothing much to it!
(You need to remove the .txt extension, to use the files 'for real' of course)
 

Attachments

12harry

Well-known Member
Although I don't use it, I understood that New Blue ( which now comes with Sony Movie Studio ) can use keyframing and plane distortion to give that effect. However you may need to obtain the right Font as well, although N-B does come with quite a lot and their Text Editor has the decency to display the actual fonts in the selector bin.

DYOR
N-B may be bundled only with the up-market "suite" - so not if you buy the basic Editor. There are plenty of "How to's" on YT for almost every means of doing this . . .
-but why "copy" when you can invent yr own?

Good luck.
 

rogs

Well-known Member
I think you may have missed my point Harry.... I know there are many ways of achieving the Star Wars 'crawl'.... it's got to be one of the most copied sequences in graphics history!:)

I used it here to illustrate that using CSS3 and HTML5 ... which are free of course .... you can achieve quite sophisticated graphic animations, without having to fork out lots of cash.
Or more accurately, without forking out any cash!

I wondered if any one else had tried using CSS3 for animations or titles, and what results they had got?

I chose to try out the Star Wars sequence to see how easy it would be to get somewhere near to something well known, without having to use a full blown commercial titling or FX package.....
 

The latest video from AVForums

Podcast: Marantz SR7015 & NAD T 778 AVR + Mission LX2 MKII Speaker Reviews, AV & Film News and More
Top Bottom