A subsequent downward tilt reveals the film's episode number, the subtitle in all-capital letters, and a three-paragraph summary of events immediately prior to the events of the film. This way, the elements in the animation are centered on the screen even when the screen is resized during the animation.Each of the nine episodic Star Wars films begins with nearly identical openings, in which the text "A long time ago in a galaxy far, far away.…" is displayed, followed by the Star Wars logo over a field of stars. Vertical centering of elements is done using CSS 3 transforms: top : 50 % transform : translateY ( -50 %) Dimensions and centeringĪll dimensions of text and images are specified as percentages and ems, so that the animation works well on any screen size. 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. 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. There are three animations in this code: the intro text, the Star Wars logo, and the actual scroller. The resulting transparent logo can now be projected over the starfield background.
The logo used in this animation came from WikiMedia, and I altered the SVG content to remove its black background. With base 64 encoding, URL encoding is not required, but the base 64 string will be larger than the original SVG string. 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.
background-image : url ( "data:image/svg+xml base64,PHN2Z.N2Zz4=" ) Just like you can store bitmap images in CSS using base 64 encoding, the same is true for SVG. 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. This animation was inspired by Tim Pietrusky’s Star Wars intro. This guide shows how to implement the Star Wars (1977) intro scroller in pure CSS. CSS 3 has come a long way and it is now possible to construct complex animations without a line of JavaScript.
0 kommentar(er)
