「スター・ウォーズ／フォースの覚醒」がついに上映開始されましたね！
僕は、スターウォーズ見たことの無い人間なので、詳しいことはわからないのですが。。
最近、codepen.ioを利用して、jsの勉強に励んでいるのですが、ふとトップページの「Picked Pens（オススメの投稿）」を見ていたら、スターウォーズだらけになっていたので、せっかくなのでまとめてみましたｗ
この記事の目次
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のドット画を作っているみたいです。それを３パターン用意してcss3のAnimationで１→２→３→１とループさせている形です
ライトセイバーのメニューアイコン
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.
こちらは、色違いの４種類のライトセイバーを楽しめる様になっていますね。というかこっちは完全に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が出てきました！意外と人気がないのかな。というか、もしかして最近のスターウォーズには出ていないのかな。
おわりに
いかがでしたでしょうか。スターウォーズのファンだけでもこんなに凄い人たちがゴマンといるわけで、しかもこれからエピソード７を見て感動した方々がどんどん増やしていくのでしょうｗ僕がスターウォーズを見たら、またまとめてみようかな。あと作ろう。楽しみです。