ブログ

BLOG

CodePenの2019年の人気コードランキングベスト100！

DP_ROBOT Other Blog

CodePenとは

「 CodePen 」をご存知ですか？

CodePenはHTML/CSS/Javascriptをブラウザ上でコーディングでき、書いたコードを公開・共有することもできるオンラインコミュニティです。

他の人が書いたコードを自分のダッシュボードに複製(Fork)して編集したりもできます。

私の場合、Webデザインのアイディアを探したり、使ってみたいコードをストックしたり、ボタンホバーの挙動イメージをプランナーやコーダーに伝えるために使ったりしています。

お気に入り機能もあり、自分が気に入ったコードにハートマークを3段階評価で付けることができます。 CodePenのマイページでは、自分が付けたハートの数によってコードをフィルタリングして閲覧する事が可能です。

The Most Hearted of 2019

CodePenで2019年のハート数ランキングベスト100が発表されていました！
The Most Hearted of 2019

使い勝手の良さそうなものから思わず笑ってしまうものまで、多種多様なコードがランクインしていました。
特に気になったコードをご紹介します！

「 Run Pen 」ボタンを押すと、コードがロードされます。

99位 SVG Hamburger Menu Icon Animation Collection

ハンバーガーメニュー用のアニメーション6種です。

See the Pen <a href="https://codepen.io/matthewmain/pen/NWKoPXJ">SVG Hamburger Menu Icon Animation Collection</a> by Matthew Main (<a href="https://codepen.io/matthewmain">@matthewmain</a>) on <a href="https://codepen.io">CodePen</a>.

92位 Tab Bar Menu Animation

タブメニュー用のアニメーションです。

See the Pen <a href="https://codepen.io/dgknca/pen/ExYGWJw">Tab Bar Menu Animation</a> by Doğukan Çavuş (<a href="https://codepen.io/dgknca">@dgknca</a>) on <a href="https://codepen.io">CodePen</a>.

87位 Fancy tab bar active animation

こちらもタブメニューのアニメーション。タイトルの通りファンシーな動きです。

See the Pen <a href="https://codepen.io/aaroniker/pen/bGbBQaR">Fancy tab bar active animation</a> by Aaron Iker (<a href="https://codepen.io/aaroniker">@aaroniker</a>) on <a href="https://codepen.io">CodePen</a>.

86位 Loading

文字がキャッチボールをしているように見えるローディングアニメーション。

See the Pen <a href="https://codepen.io/kathykato/pen/YzKGrqd">Loading</a> by Katherine Kato (<a href="https://codepen.io/kathykato">@kathykato</a>) on <a href="https://codepen.io">CodePen</a>.

84位 Shooting Star

マウスの軌跡が流れ星のようにキラキラと光ります。

See the Pen <a href="https://codepen.io/ko-yelie/pen/LqXWWx">Shooting Star</a> by Ko.Yelie (<a href="https://codepen.io/ko-yelie">@ko-yelie</a>) on <a href="https://codepen.io">CodePen</a>.

78位 Escape Room!

ブラウザ上で遊べる脱出ゲーム。※PC推奨
あまりにも凄すぎるので「 Edit on CODEPEN 」のボタンから大きな画面で遊んでみてください。
ちなみに私はパネルの入れ替えがどうやっても出来ず、クリアできませんでした……

See the Pen <a href="https://codepen.io/KristopherVanSant/pen/dEZZEN">Escape Room!</a> by Kristopher Van Sant (<a href="https://codepen.io/KristopherVanSant">@KristopherVanSant</a>) on <a href="https://codepen.io">CodePen</a>.

76位 Bob Ross Doing the Floss, Like a Boss (Pure CSS)

画家のボブ・ロスが踊るCSSアニメーション。
これは私の母がボブ・ロス画法を習ってたのでツボりました。

See the Pen <a href="https://codepen.io/ste-vg/pen/jXogqd">Bob Ross Doing the Floss, Like a Boss (Pure CSS)</a> by Steve Gardner (<a href="https://codepen.io/ste-vg">@ste-vg</a>) on <a href="https://codepen.io">CodePen</a>.

75位 Fancy Exploding Button

VueJSとGSAPを使って作られたボタンエフェクト。

See the Pen <a href="https://codepen.io/takaneichinose/pen/jONdGxM">Fancy Exploding Button</a> by Takane Ichinose (<a href="https://codepen.io/takaneichinose">@takaneichinose</a>) on <a href="https://codepen.io">CodePen</a>.

70位 Stars rating animation

キュートなアニメーションの5段階評価。
drop-shadowで星の光を表現しているのが素敵。

See the Pen <a href="https://codepen.io/aaroniker/pen/XWrxyRJ">Stars rating animation</a> by Aaron Iker (<a href="https://codepen.io/aaroniker">@aaroniker</a>) on <a href="https://codepen.io">CodePen</a>.

67位 Particle Wave

背景などに良さそうなパーティクルアニメーション。

See the Pen <a href="https://codepen.io/stufreen/pen/KOWKBw">Particle Wave</a> by Stu Freen (<a href="https://codepen.io/stufreen">@stufreen</a>) on <a href="https://codepen.io">CodePen</a>.

65位 Arrow animation

矢印ボタンのアニメーション。使ってみたい。

See the Pen <a href="https://codepen.io/aaroniker/pen/BbPpOj">Arrow animation</a> by Aaron Iker (<a href="https://codepen.io/aaroniker">@aaroniker</a>) on <a href="https://codepen.io">CodePen</a>.

63位 Flipping Out

とにかく楽しい、顔文字アニメーション。

See the Pen <a href="https://codepen.io/jkantner/pen/OrQvyZ">Flipping Out</a> by Jon Kantner (<a href="https://codepen.io/jkantner">@jkantner</a>) on <a href="https://codepen.io">CodePen</a>.

58位 Flippin' juicy burgers

ちょっと変わっていて、かつ使いやすそうなハンバーガーメニューのアニメーションです。

See the Pen <a href="https://codepen.io/ainalem/pen/GeMqdP">Flippin' juicy burgers</a> by Mikael Ainalem (<a href="https://codepen.io/ainalem">@ainalem</a>) on <a href="https://codepen.io">CodePen</a>.

55位 Pagination Buttons

動きのあるページネーションボタン。

See the Pen <a href="https://codepen.io/himalayasingh/pen/WmNKjE">Pagination Buttons</a> by Himalaya Singh (<a href="https://codepen.io/himalayasingh">@himalayasingh</a>) on <a href="https://codepen.io">CodePen</a>.

30位 Overlay menu

ヌルヌルと動くメニュー用アニメーション。

See the Pen <a href="https://codepen.io/ig_design/pen/VgaXaY">Overlay menu</a> by Ivan Grozdic (<a href="https://codepen.io/ig_design">@ig_design</a>) on <a href="https://codepen.io">CodePen</a>.

29位 Back to top with progress indicator

トップに戻るボタンが、スクロール量で変化します。

See the Pen <a href="https://codepen.io/ig_design/pen/yrwgwO">Back to top with progress indicator</a> by Ivan Grozdic (<a href="https://codepen.io/ig_design">@ig_design</a>) on <a href="https://codepen.io">CodePen</a>.

18位 React Slider w/ Hover Effect

Reactで構築されたカルーセル。マウスホバーで画像がズームします。

See the Pen <a href="https://codepen.io/hexagoncircle/pen/jgGxKR">React Slider w/ Hover Effect</a> by Ryan Mulligan (<a href="https://codepen.io/hexagoncircle">@hexagoncircle</a>) on <a href="https://codepen.io">CodePen</a>.

5位 Simple CSS Waves | Mobile & Full width

とても人気のある、波型のCSSアニメーション。
CodePenで「 wave 」タグを見てみるとフォークされまくってました。

See the Pen <a href="https://codepen.io/goodkatz/pen/LYPGxQz">Simple CSS Waves | Mobile & Full width</a> by Goodkatz (<a href="https://codepen.io/goodkatz">@goodkatz</a>) on <a href="https://codepen.io">CodePen</a>.

3位 Click the button!

ぜひボタンをクリックしてみてください！※PC推奨
ボタン挙動だけでなく英文にもクスっと笑ってしまいます。

See the Pen <a href="https://codepen.io/bnhovde/pen/OJLYGKx">Click the button!</a> by Bård N Hovde (<a href="https://codepen.io/bnhovde">@bnhovde</a>) on <a href="https://codepen.io">CodePen</a>.

1位 Credit Card Form - VueJs

画面に表示されているクレジットカードに、フォームの入力内容がリアルタイムに反映されます。

See the Pen <a href="https://codepen.io/JavaScriptJunkie/pen/YzzNGeR">Credit Card Form - VueJs</a> by Muhammed Erdem (<a href="https://codepen.io/JavaScriptJunkie">@JavaScriptJunkie</a>) on <a href="https://codepen.io">CodePen</a>.

コードをWeb検索で探したりCodePenをよく見る人なら、見覚えのあるコードもいくつかあったのではないでしょうか。
私自身、パーティクルのコードは実際に提案で使ったりしてしました。

ランクインしたコードは一通り触ってみたのですが、ここで紹介しなかったコードにも面白いものはいくつもありました。
また、コードの作者ページから他のコードを見てみたりすることで、とても良い刺激をもらいました！
今後のWebデザイン制作にぜひ取り入れてみたいなと思います。

CodePenの2019年の人気コードランキング ベスト100！

CodePenとは

The Most Hearted of 2019

CodePenの2019年の人気コードランキングベスト100！