Pure CSS Star Wars Intro Scroller

CSS 3 has come a long way and it is now possible to construct complex animations without a line of JavaScript. This guide shows how to implement the Star Wars (1977) intro scroller in pure CSS. This animation was inspired by Tim Pietrusky’s Star Wars intro. This implementation contains no JavaScript at all, adds a […]

This article was posted by Independent Software, a website and database application development company based in Maputo, Mozambique. Our website offers regular write-ups on technical and design issues, ranging from details at code level to 3D Studio Max rendering. Read more about Independent Software's philosophy, or get in touch with Independent Software.

CSS 3 has come a long way and it is now possible to construct complex animations without a line of JavaScript. This guide shows how to implement the Star Wars (1977) intro scroller in pure CSS.

This animation was inspired by Tim Pietrusky’s Star Wars intro. This implementation contains no JavaScript at all, adds a starfield, and the SVG image used for the Star Wars logo is actually stored inside the CSS as a base-64 encoded image.

See the Pen Star Wars Scroller in Pure CSS by Independent Software (@independent-software) on CodePen.1

Storing an SVG image inside CSS

Just like you can store bitmap images in CSS using base 64 encoding, the same is true for SVG.

This can be done either with or without base 64 encoding, but without encoding care must be taken that the SVG string contains no linebreaks and is properly URL-encoded, otherwise special characters like #  will cause errors. With base 64 encoding, URL encoding is not required, but the base 64 string will be larger than the original SVG string.

The logo used in this animation came from WikiMedia, and I altered the SVG content to remove its black background. The resulting transparent logo can now be projected over the starfield background.

Animation sequencing

There are three animations in this code: the intro text, the Star Wars logo, and the actual scroller. In order to make them play one after the other (without using any JavaScript), they are all set to take exactly 100 seconds and the keyframes in the animation implement the delays necessary to make the sequence play correctly. This method also allows all animations to loop at the exact end of the movie so that they all start again when the movie repeats.

Dimensions and centering

All dimensions of text and images are specified as percentages and ems, so that the animation works well on any screen size. Vertical centering of elements is done using CSS 3 transforms:

This way, the elements in the animation are centered on the screen even when the screen is resized during the animation.

Trackbacks

  1. Stretching the limits of CSS 3: Amazing creations in pure CSS | Independent Software

Comments

1 One Response to “Star Wars Intro Scroller in Pure CSS without JavaScript”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">