ITエンジニア/デザイナ向けにオープンソースを毎日紹介

みんな大好きなスターウォーズ。そしてスターウォーズと言えば、映画開始直後のオープニングの演出は誰もが知っているところだと思います。あの瞬間からスターウォーズの世界に引き込まれていくことでしょう。

そんなスターウォーズのイントロをCSSだけで再現したのがStar Wars Introです。ぜひご覧ください!

Star Wars Introの使い方

ババーン!ちなみに音は出ません。

チャーラーチャララチャーチャーン。何度も言う通り、音は出ませんのであしからず。

アニメーションをGIFにしてみました。実際の動きはもっと滑らかです。

Star Wars Introの魅力はなんと言ってもスタイルシートだけでここまでレベルの高いアニメーションを再現したところにあるでしょう。すぐJavaScriptに頼ってしまうものですが、スタイルシートだけであればブラウザの設定で切られることも殆どなく、閲覧者に同じ体験を提供できるのが利点です。

Star Wars IntroはCSS3製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

Star Wars Intro : The Star Wars Intro Crawl in Pure CSS

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2