Skip to main content
100%

Star Wars 3D Scrolling Text in CSS3 (with music)

✓ Published0🌍 Public
ZZeukkari
Last edited Sep 10, 2015
Created on Sep 10, 2015

This example recreates the iconic Star Wars opening crawl as a CSS3 3D scrolling text effect, using the Finnish Civil Service Act as the displayed text. A hidden YouTube embed provides background music and an autoplaying video, while the page uses nested divs and CSS transforms to create the illusion of text receding into the distance. The visualization is forked from Scott Bram’s CodePen and includes the original "A short time ago..." intro and STAR WARS title with subtitle.

AI-generated description

Similar vizzes

Loading thumbnail…

SVG Animation Playground

An SVG animation playground built with pure CSS and HTML, showcasing a Star Wars-inspired title sequence. Two images, "GETIT" and "RIGHT", animate with scaling, opacity shifts, and 3D depth effects using CSS keyframes and transforms. The text "IN BLACK AND WHITE" spins its letters individually with rotateY animations while moving in perspective space. The demo relies solely on CSS animations and inline SVG images, with a starfield background embedded via CSS, demonstrating how to create cinematic motion effects without JavaScript libraries.

AAndre J Denais
74% match
Loading thumbnail…

Fork of SVG Animation Playground

This example demonstrates an SVG animation inspired by the opening crawl of Star Wars, featuring two rotating images and a spinning headline that fade in and out with a 3D perspective effect. The animation uses CSS keyframes defined in a separate stylesheet, with properties like `transform`, `opacity`, and `translateZ` to create scale, rotation, and depth transitions over a 10-second infinite loop. The scene is composed of inline SVG images loaded from external gist URLs, styled with the `Lato` font, and set against a fixed background image. The container uses `perspective` and `transform-style: preserve-3d` to enable the three-dimensional motion.

JJonas Carvalho
70% match
Loading thumbnail…

Fork of SVG Animation Playground

This example demonstrates a Star Wars-inspired animation of two SVG images, “GETIT” and “RIGHT,” alongside the text “IN BLACK AND WHITE,” all rendered against a starfield background. The animation uses CSS keyframes to create a 3D perspective effect, with the images scaling, translating, and spinning in from the distance while the byline’s letters rotate individually. The code relies on CSS animation properties and keyframes, the `perspective` and `transform-style` properties for 3D depth, and responsive media queries to adjust the layout.

MMathias-Daum
70% match
Loading thumbnail…

Fork of SVG Animation Playground

This fork of a CSS animation playground recreates a Star Wars–style title sequence using two SVG images (“GET IT” and “RIGHT”) and a text byline rendered in HTML. The code defines keyframe animations—`getit`, `right`, `spin-letters`, and `move-byline`—to scale, translate, and rotate elements in 3D space via CSS `perspective` and `transform-style: preserve3d`. The animation loops infinitely over 10 seconds, with the two SVG images and the byline fading and moving toward the viewer against a static background.

KK V VINITHA
69% match
Loading thumbnail…

CSS Animated Starfield

This example demonstrates a purely decorative, CSS-animated starfield that brings a static header image to life. The animation adds a subtle twinkling effect to the stars by fading them in and out while slightly scaling their size, creating a gentle shimmering ambiance. The code relies exclusively on CSS keyframes and the `-webkit-animation` property, with each star's position and animation delay defined by its unique ID. The background image and texture are layered using CSS `background` properties, while the foreground cover element is positioned absolutely. No JavaScript libraries are used; the effect is achieved solely through HTML and CSS.

CCKschneid
69% match
Loading thumbnail…

stars

This example creates an animated typography intro where text lines ("Javascript", "meets", "deep learning", "with", "TensorFlow.js") are revealed sequentially. Each line is rendered as an `<h1>` element, while the final line is split into individually colored spans. The animation uses an SVG `<textPath>` to define a path for each header, and a starfield particle system (rendered on canvas with blur and contrast filters) bursts along these paths as the text fades in. The text transitions are staggered, with each line's star trail animating along its path in sequence, and the final line triggers a longer particle effect. The design uses the Google Font "Indie Flower" and a dark background, with each letter of the last line assigned a different color.

EEE2dev
68% match
Loading thumbnail…

Fork of SVG Animation Playground

This animated typography piece demonstrates a dramatic, Star Wars-inspired title reveal. Two alternate forms of the word “GET IT RIGHT” are displayed through layered SVG images, alongside the author's name, “Shaban.” The animation is driven by CSS keyframes applied to the images and a header, using transforms to create a 3D perspective effect. The container uses the `perspective` and `transform-style` CSS properties to enhance depth, while the animated lettering is achieved through the “spin-letters” keyframe. The code references external SVG assets and uses a background image from `cssanimation.rocks`.

AAzhar-Shaban
65% match
Loading thumbnail…

stars

This example animates a multi-line text introduction by first drawing the words along SVG `<textPath>` elements, then replacing the text with thousands of small, glowing star-shaped particles. The visualization uses D3 v5 to lay out the text on curved and straight paths, computes path endpoints and text lengths to align the words, and then spawns a canvas-based particle system with custom star sprites and additive blending. Each word is revealed by a burst of stars that traces along its path, while gradient fills and blur/contrast filters create a luminous, space-like effect. The animation cycles through the phrases, with mouse interaction disabled to keep the focus on the choreographed particle motion.

EEE2dev
65% match