すでにアメリカなどを中心に、世界的大ブームとなっているポケモンGO が、ついに日本でも配信が開始されました。この人気はウェブデザインのアイデアとして、じわじわ影響を与えはじめているようです。
今回はコード共有サイト CodePen より、ポケモンGO をモチーフにしたHTMLスニペットをいくつかご紹介します。モンスターの捕獲シーンを再現したり、コミカルな動きをCSSアニメーションで表現したり、面白い作品が公開されていました。
詳細は以下から。
ポケモンGOをモチーフにした面白HTMLスニペットまとめ
Pokemon Go – ZingTouch x Anime.js
軽量なアニメーションJSライブラリ Anime.js を利用し、モンスターの捕獲シーンを再現しています。サークルの大きさに合わせて、スワイプしてボールをタイミングよく投げることで、実際にキャッチすることもできます。
See the Pen Pokemon Go – ZingTouch x Anime.js by ZingChart (@zingchart) on CodePen.
ピカチュウがてくてくと歩くローディング用アニメーション。
See the Pen Pikachu Loading Page by Tetsu (@Tetsu) on CodePen.
ピクセルアートを立体的に描いた作品で、CSSのみで描かれています。再生ボタンでテーマソングが流れます、ボリュームにご注意ください。
See the Pen CSS Isometric Pokemon by Ash (@littleginger) on CodePen.
こちらもCSSのみでスタイリングされた、その名もポケモン・アイコン。
See the Pen Pokemon Icon by Rıza Selçuk Saydam (@rss) on CodePen.
モンスターボールを選択すると、CSSのみで作成されたピクセルアート風モンスターが出現します。
See the Pen Choose your Starter by Kyle Shanks (@mavrK) on CodePen.
100% Functioning Pokemon Go Clone
背景にグラデーションのアニメーションを@keyframeで表現した、アプリのオープニング画面。
See the Pen 100% Functioning Pokemon Go Clone by Tim Holman (@tholman) on CodePen.
Pokeballs with wiggle-animation | CSS
CSSアニメーションを利用して、グラグラと揺れる動きを表現したスニペット。
See the Pen Pokeballs with wiggle-animation | CSS by Håvard Brynjulfsen (@havardob) on CodePen.
CSSのみで表現されたザ・クラシック。ピクセルアートとアニメーションが見事です。
See the Pen Pokémon! by Kevin Jannis (@kevinjannis) on CodePen.
モンスターの捕獲シーンやプロフィール画面などの、インターフェースを完全再現したUIコンポーネントも公開されていました。Photoshop で編集可能なPSDファイルで収録されています。
ポケモンGOで自分の近くにポケモンが出現したらSlackに通知する
アプリを起動しっぱなしにするのを防ぐことができ、ポケモンが出現したらSlackに通知してくれます。
リアルタイムであなたの近くにいるポケモンを検索できるツールで、ポケモンの下に出ている数字は制限時間で、この時間内に近くまで行けば、捕まえることができるようです。
公式ページでは、アプリが正式に公開されたことが動画で発表されています。では、安全には十分気をつけて、探検を楽しんでください。
