【STAR WARS】CSSやJavaScriptで実装されたキャラクター達まとめ

Pocket
LINEで送る

「スター・ウォーズ/フォースの覚醒」がついに上映開始されましたね!
僕は、スターウォーズ見たことの無い人間なので、詳しいことはわからないのですが。。
最近、codepen.ioを利用して、jsの勉強に励んでいるのですが、ふとトップページの「Picked Pens(オススメの投稿)」を見ていたら、スターウォーズだらけになっていたので、せっかくなのでまとめてみましたw

HTML/CSS/JavaScriptで描かれたスターウォーズのキャラクター達

スターウォーズ大好きなクリエイター達が、色々なキャラクターをCSSやJavaScriptを使った描いていたので、簡単にまとめてみました。
まとめているコードを見るだけでも本当勉強になります。と同時に「世の中凄い人ばっかりだなぁ」と、痛感します。。

CSSだけで作られたxウィング

See the Pen I don’t know Chewie, fly casual! by Caohim (@caohim) on CodePen.

スターウォーズに登場する飛行機らしい。マルチロールファイター(いわゆる万能型)のようで、ローグ中隊で活用された機体みたいです。戦闘時のみ羽が4つに分離して正面から見た時にXになることからxウィングって呼ばれているらしいのですが(wiki調べ)、これはどっちだろう、、、
タイトルにChewieってあるから、チューバッカってやつが乗ってたのかな?

Xウィング(エックス – 、X-Wing)は映画『スター・ウォーズ・シリーズ』に登場する架空の戦闘機である。
【出典:Xウイング – Wikipedia】

cssだけで作られた主要キャラクターのアイコン

See the Pen Flat Star Wars by Kevin Jannis (@kevinjannis) on CodePen.

cssだけでコーディングされたスターウォーズにでてくる主要キャラクターのアイコンです。上からYoda・Darth Vader・Luke Skywalker・Chewie himself・Storm Trooper・Leia・C3PO・Emperor・Han Solo・R2D2・Boba Fett・Obiwan Kenobi・Death Star。
ファンに怒られるかもしれないけれど、Leiaが卑弥呼にしか見えない。Obiwan Kenobiはたまに出てきて主人公達を助ける強キャラっぽい。

cssだけで作られたStorm Trooper

See the Pen Star Wars Storm Trooper in pure CSS by Aleks (@achudars) on CodePen.

Storm Trooperは確かダース・ベイダーの部下というか、部隊のメンバーだった気がする。(Trooper = 騎兵)だしおそらく間違いないかと。これもcssだけでコーディングされていますね。一応調べてみました。

ストーム・トルーパー(Storm Trooper)(一部ではImperial Storm Trooper、帝国軍ストーム・トルーパーと表記されている)は、アメリカのSF映画『スター・ウォーズ』シリーズに登場する銀河帝国軍の機動歩兵。彼らはストーム・トルーパー軍という組織に所属しており、地上軍や宇宙軍には別に独自の歩兵(アーミー・トルーパー/ネイヴィー・トルーパー)が存在する。(中略)基本的に同シリーズの銀河共和国軍のクローン・トルーパーと同様の存在で、黒い温度調整ボディ・グローブの上に打撃や銃弾、爆発による破片・ガスなどから身を守る簡易宇宙服をかねた18ピースの装甲服を着用し、ブラスターライフルで武装している。
【ストーム・トルーパー – wikipedia】

なるほど、隙間から見える黒いのは全身タイツ(温度調整ボディ・グローブ)で、白い装甲が簡易宇宙服をかねた18ピースの装甲服ということらしい。が、宇宙服ってこんなに隙間が空いていて機能するの?

ムーンウォークするStorm Trooper

See the Pen StarWars Pixel Stormtrooper Moonwalk by Yusuf Bakır (@yusufbkr) on CodePen.

これまたcssだけで・・Animationだけでここまで実装できるのは、本当凄いとしかいいようがありませんね。どうやらbox-shadowでドットを一つ一つ作って、Storm Trooperのドット画を作っているみたいです。それを3パターン用意してcss3のAnimationで1→2→3→1とループさせている形です

ライトセイバーのメニューアイコン

See the Pen Star Wars Toggle Icon Animation by Rıza Selçuk Saydam (@rss) on CodePen.

クルッとまわって、x表示の時だけhoverでライトセイバーになるメニューアイコンです(これカッコいい・・)。jQueryでclass切り分け、ほかはcssですね。borderだけでライトセイバーの柄を表現したり、rotateの挙動やbox-shadowの勉強になります。地味にtransitionの経過時間を要素毎に変更している点など、細部へのこだわりが素敵です。余談ですが昨日、会社でスターウォーズの話題が出た時にずっとビームサーベルといい間違えていました。

cssだけで作られたスターウォーズのタイトル

See the Pen Star Wars: The Force Awakens in CSS by Donovan Hutchinson (@donovanh) on CodePen.

cssだけでタイトルロゴを回転させながら表示させています。映画版さながらのエフェクトに感動です。(見たことないですが)jsの記述は、最初にHTMLで記述しているThe Force Awakensというテキストをspanで包含して一文字ずつ個別でエフェクトを掛けるためにclass付与を利用しているみたいで、動作に関しては全てcssみたいですね。おそらくjs記述をなくしてテキストを一文字ずつspanで包含してclass付与しても動作するでしょう。

これまたcssで実装されたスターウォーズの兵器

See the Pen STAR WARS AT-AT Walker by r4ms3s (@r4ms3s) on CodePen.

スターウォーズに出てくる兵器か何かなのはわかります。見たことはあります。周りを滑走していく戦闘機から兵器の動作の細部に至るまで、全てcssでコーディングされているので驚きですね。一つ一つのパーツに至るまで全てCSS記述です。。何時間かかったんだろう。。

cssだけで実装できるライトセイバー!

See the Pen Light Saber by Lewis Robinson (@lewisvrobinson) on CodePen.

ビームサ・・ライトセイバーです!これはカッコいい。ブンブン振り回したくなりますね。jQueryで制御されていますが、class名をちょろっと変えるだけでcssだけでの実装もできそうです。

See the Pen Pure CSS3 Star Wars Lightsaber Checkboxes by Nicholas Cerminara (@ncerminara) on CodePen.

こちらは、色違いの4種類のライトセイバーを楽しめる様になっていますね。というかこっちは完全にcssだけでの実装ができています。持ち手の感じは上の方がカッコいいんですけどね

See the Pen Star Wars: Attack of the DOM by Nicholas Cerminara (@ncerminara) on CodePen.

こちらもライトセイバーですが、あれ・・・・・ミッキーマウス?そしてこのjsは「Click to Fight!」をクリックすると要素が全部落ちてくるようになっています。

cssだけで実装されたモブキャラの顔

See the Pen Stormtroopers by HermineF (@HermineF) on CodePen.

これまたcssだけで実装されたモブキャラの顔一覧になります。あれ?一番右ってダース・ベイダー?ダース・ベイダーってモブキャラと色違いなだけなんですかね?一つ一つのパーツが全てcssで記述されているので、かなり緻密な設計になっています。真似するのは大変骨が折れそうです。

マウス位置に反応するエフェクトがカッコいい

See the Pen Parallax Image Layers – Star Wars by Vahid (@vahidseo) on CodePen.

背景全面ダース・ベイダーに、何やら色々なカッコいいエフェクトがかかっている。長く見ていると目が疲れてしまいます。やっていることはレイヤーを重ねて、cssでblurを繰り返し、jsではmousemoveで発火させて重ねたレイヤーの動作って感じですね。

R2D2のちっこい版(名前がわからない)がマウスカーソルによってくる

See the Pen BB-8 by Apex Design Studio (@apexdesignstudio) on CodePen.

可愛い感じのロボットがマウスの位置によってくるコードです。これは新しいキャラクターですかね。R2D2とC3POしかわからない僕から見た印象は、可愛い系のちっこいロボットって印象です。タイトルから察するにBB-8ってロボットなのでしょうが。こちらも画像は一切使わずcssでデザインを簡潔し、jsでmouse位置によって発火させていますね。クオリティ高いです。

SVGで描かれたカッコいいヨーダ(多分)

See the Pen SVG Star Wars animation by Sépion (@Sepion) on CodePen.

SVGで動的に描かれるヨーダです。コードを見た感じおそらくコイツがヨーダでしょう。上で紹介しているライトセイバーの短いのにもyodaって書いてあるしきっと小人族的な感じなのでしょう。HTMLのながーい記述はほぼsvgのパスですね。

cssだけで描かれたR2D2!

See the Pen star war by jonathan preciado (@jonathan2222222222) on CodePen.

cssだけで記述されているとは思えないクオリティですね。ようやく僕でも知っているR2D2が出てきました!意外と人気がないのかな。というか、もしかして最近のスターウォーズには出ていないのかな。

おわりに

いかがでしたでしょうか。スターウォーズのファンだけでもこんなに凄い人たちがゴマンといるわけで、しかもこれからエピソード7を見て感動した方々がどんどん増やしていくのでしょうw僕がスターウォーズを見たら、またまとめてみようかな。あと作ろう。楽しみです。

SNSでもご購読できます。