CodePenとは
CodePenはHTML、CSS、JavaScriptのコード入力画面と、その結果が表示される画面が一体で操作できるサービスです。
多くの作者がテンプレートを公開していて、自分の環境にフォークして使えます。
今回自分でWebアプリを作るにあたり参考にさせていただこうと調べた中で面白かったものを挙げていきます。
お気に入りのanime.js
anime.jsは「A lightweight JavaScript animation library with a simple, yet powerful API」とのこと。
（いわゆる日本のアニメじゃなかった）
2021/5/21時点でFeaturedされた順に24個を調べてみました。（Like数順にソートする方法を知っている方、教えてくださいm(__)m）
個人的に直近で使えそう・使いたいものに◎をつけています。
↑ スマホの下部からテキストがぴょんと飛び出て、重力に引かれてちょっと落ちる感じが小気味よい。
↑ ビーカーの中の液体をマウスで引っ張れる。マウスを話すと本当の液体のように波打つ。面白い。使い道思いついてないけど好き。
↑ ◎ ボタンを押したら進捗バーに変化し、MAXになったら丸く変化してチェックマークのアクションになる。一気にお洒落サイトになりそう。
↑ 木の葉を模したデザインがはらはらと落ちていく。まじか。こんなことまでできるのか。
↑ ◎ 文字や写真をカラーバーの動きで上に隠してまた表示させる。クール。
↑ ◎ ナビゲーションバーを押すと項目が波打って左右から登場する。慣性の揺れも表現されていてポップな感じ。
↑ ボタンが逃げる（笑） ジョークサイトに良さそうだけどイラつかれそうw
↑ 昼モードと夜モードを切り替える。トグルが太陽と月でおしゃれ。
↑ こちらもダークモードへの切り替えボタン。丸い太陽のボタンが三日月に変わる。シンプル。
追記）Gamesカテゴリを調べてたらこちらのカテゴリのほうがふさわしいものを見つけたのでこちらに追記します。
↑ ローディング画面集。シンプルお洒落。
↑ マンスリーカレンダーでその日の予定を確認できる。前月や次月に移動も可能。
↑ ◎ メニューボタンを押した際にメニュが縦タイルでパタパタと登場する。お洒落。
おわりに
しまった、延々と見てられるｗ むしろ全部見尽くしたいｗ
でも時間は有限なのでこれくらいでやめておきます。
おすすめのテンプレートがありましたら是非コメントで教えてください。m(__)m