ネット・PC

CSS3とHTML5のみで映画「スター・ウォーズ」の文字スクロールを見事に再現

2012.10.28 23:46 by wakaba

メインテーマとともに手前から文字がスクロールしていく映画「スター・ウォーズ」シリーズのオープニングをCSS3とHTML5だけで再現してしまったデモがこちら。どこでどういう風に使うのかは結構難しいのですが、単純にカッコイイです。

まずは、タイトル: 「STAR WARS title in CSS3」が表示されます。

そして、スクロール開始。

どんどん文字が流れていきます。ちなみに内容は使い方や、「IEには未対応です」などの解説となっています。

そして、最後の文字が流れて終了。

こちらのURLからデモを見ることができます。※対応ブラウザ(Chrome、Safari、Firefox）
CSS Star Wars Crawling Titles

また、オリジナルのスター・ウォーズのオープニングの動画です。CSS3のみ非常に再現度が高いイントロが作られていることがよくわかります。
Star Wars original opening crawl – 1977 – YouTube

CSS3デザインブック仕事で絶対に使うプロのテクニック

Amazon.co.jp で詳しく見る