」をご存知ですか?CodePenはHTML/CSS/Javascriptをブラウザ上でコーディングでき、書いたコードを公開・共有することもできるオンラインコミュニティです。他の人が書いたコードを自分のダッシュボードに複製(Fork)して編集したりもできます。ボタンホバーの挙動イメージをプランナーやコーダーに伝えるために使ったりしています。お気に入り機能もあり、自分が気に入ったコードにハートマークを3段階評価で付けることができます。CodePenのマイページでは、自分が付けたハートの数によってコードをフィルタリングして閲覧する事が可能です。2019使い勝手の良さそうなものから思わず笑ってしまうものまで、多種多様なコードがランクインしていました。」ボタンを押すと、コードがロードされます。Collectionハンバーガーメニュー用のアニメーション6種です。Animationタブメニュー用のアニメーションです。animationこちらもタブメニューのアニメーション。タイトルの通りファンシーな動きです。Loading文字がキャッチボールをしているように見えるローディングアニメーション。Starマウスの軌跡が流れ星のようにキラキラと光ります。Room!ブラウザ上で遊べる脱出ゲーム。」のボタンから大きな画面で遊んでみてください。CSS)画家のボブ・ロスが踊るCSSアニメーション。これは私の母がボブ・ロス画法を習ってたのでツボりました。ButtonVueJSとGSAPを使って作られたボタンエフェクト。animationキュートなアニメーションの5段階評価。drop-shadowで星の光を表現しているのが素敵。Wave背景などに良さそうなパーティクルアニメーション。animation矢印ボタンのアニメーション。Outとにかく楽しい、顔文字アニメーション。burgersちょっと変わっていて、かつ使いやすそうなハンバーガーメニューのアニメーションです。Buttons動きのあるページネーションボタン。menuヌルヌルと動くメニュー用アニメーション。indicatorトップに戻るボタンが、スクロール量で変化します。EffectReactで構築されたカルーセル。マウスホバーで画像がズームします。widthとても人気のある、波型のCSSアニメーション。」タグを見てみるとフォークされまくってました。button!ぜひボタンをクリックしてみてください!※PC推奨ボタン挙動だけでなく英文にもクスっと笑ってしまいます。VueJs画面に表示されているクレジットカードに、フォームの入力内容がリアルタイムに反映されます。CodePen.コードをWeb検索で探したりCodePenをよく見る人なら、見覚えのあるコードもいくつかあったのではないでしょうか。私自身、パーティクルのコードは実際に提案で使ったりしてしました。ランクインしたコードは一通り触ってみたのですが、ここで紹介しなかったコードにも面白いものはいくつもありました。コードの作者ページから他のコードを見てみたりすることで、とても良い刺激をもらいました!今後のWebデザイン制作にぜひ取り入れてみたいなと思います。DATAPROTOP。