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

rogs

Prominent Member
Joined
Mar 16, 2008
Messages
2,389
Reaction score
383
Points
409
Location
Dorset
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?...
 
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)
 
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..
 
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?
 
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

  • Star wars.html.txt
    331 bytes · Views: 25
  • slowstrokelogo.css.txt
    1.2 KB · Views: 38
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.
 
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

TV Buying Guide - Which TV Is Best For You?
Subscribe to our YouTube channel
Back
Top Bottom