コード共有サイト Codepen で2015年に話題となった投稿ベスト100

 

HTMLなどのコードをブラウザ上で確認ができ、公開や共有もできるCodepen。その中でも、2015年のあいだに特に人気の高かったコードを、ランキング形式でまとめた The Most Hearted of 2015 が発表されていたので、今回はその中でも特に印象的だった、クリエイティブな作品をいくつかピックアップしてご紹介します。

 

 

やはり話題性の高い、最先端テクニックを駆使した投稿が中心にまとめられています。HTML/CSSやJSなどのコードを確認することができるので、今後のデザイン制作に活用してみてはいかがでしょう。

 

 

 

詳細は以下から。

 

 

 

コード共有サイト Codepen で2015年に話題となった投稿ベスト100

 

ページの読み込みに時間がかかる恐れがあります。しばらくしてからスクロールすることをオススメします。

 

100位 　Calendar Widget

HTML/CSSのみで作成された、ToDOリスト的なカレンダーウィジェット機能。

 

See the Pen Calendar Widget by Ciprian Ionescu (@ciprianionescu) on CodePen.

 

 

 

98位 One Page Scroll with Depth Effect

スクロールすることで、立体的にコンテンツを切り替えます。

 

See the Pen One page scroll with depth effect (?) by Nikolay Talanov (@suez) on CodePen.

 

 

 

96位 Material Elevation Illustration

 

See the Pen Material Elevation Illustration by Nathaniel Watson (@nw) on CodePen.

 

 

 

92位 Stats Animation

複雑なデータを、美しいグラデーションを使いアニメーション表示します。

 

See the Pen Stats animation. by Jonas Badalic (@JonasB) on CodePen.

 

 

 

90位 Simple Tile Hover Effect

サムネイルなどに活用したい、シンプルなCSSホバーアニメーション。

 

See the Pen Simple Tile Hover Effect by Chris Deacy (@chrisdothtml) on CodePen.

 

 

 

84位 Menu 1

2015年に一気に広がった、ハンバーガーメニューを用いたナビゲーションメニュー。

 

See the Pen Menu 1 by Virgil Pana (@virgilpana) on CodePen.

 

 

 

77位 Curved Cut

スクロールすることで、ヘッダーデザインが曲線状にアニメーション変化します。

 

See the Pen Curved Cut by Hornebom (@Hornebom) on CodePen.

 

 

 

74位 CSS Inbox User Interface

CSSのみでスタイリングされた、インタラクティブな動きに注目。

 

See the Pen CSS Inbox User Interface by Jamie Coulter (@jcoulterdesign) on CodePen.

 

 

 

73位 Navigation Animation

コピペで実装できる、HTML/CSSスニペットが各種揃います。

 

See the Pen Navigation Animation by EvyatarDa (@EvyatarDa) on CodePen.

 

 

 

72位 Animated Weather Icons

アイコンフォントとCSSのみで作成された、アニメーション付き天気予報。

 

See the Pen Animated Weather Icons by Josh Bader (@joshbader) on CodePen.

 

 

 

70位 Delivery Card Animation

カードをクリックすると、パタパタと詳細コンテンツが表示されます。

 

See the Pen Delivery Card Animation by Nikolay Talanov (@suez) on CodePen.

 

 

 

68位 Vertical Layout Navigation

ハンバーガーメニューをクリックすると、垂直方向にナビメニューが出現します。

 

See the Pen Vertical Layout with Navigation by Ettrics (@ettrics) on CodePen.

 

 

 

67位 Fancy Animated Info Window

 

See the Pen Fancy animated info window by Irem Lopsum (@iremlopsum) on CodePen.

 

 

 

57位 Resonsive Huggy Laser panda Factory

あらゆる端末で表示できる、レスポンシブ対応のパンダ製造マシーン。

 

See the Pen Responsive Huggy Laser Panda Factory by Sarah Drasner (@sdras) on CodePen.

 

 

 

55位 Responsive Modal Design

Googleのマテリアルデザインを意識した、動きのあるModalボックス。

 

See the Pen Responsive Modal Design by Ettrics (@ettrics) on CodePen.

 

 

 

52位 Mighty Fish

カーソルを動かすことで、キャラクターのスピード速度を変化させることができます。

 

See the Pen Mighty fish by Karim Maaloul (@Yakudoo) on CodePen.

 

 

 

50位 Cat vs Ball of Wool

マウスを動かすことで猫じゃらしを使って、猫と遊ぶことができます。

 

See the Pen Cat vs ball of wool by Karim Maaloul (@Yakudoo) on CodePen.

 

 

 

46位 Swanky Pure CSS Drop Down Menu v2.0

CSSのみでデザインされた縦型ナビメニューは、動きがポイントのドロップダウン式。

 

See the Pen Swanky Pure CSS Drop Down Menu V2.0 by Jamie Coulter (@jcoulterdesign) on CodePen.

 

 

 

44位 Article News Card

記事一覧ページなどに使える、立体感のあるカード式レイアウト。

 

See the Pen Article News Card by Andy Tran (@andytran) on CodePen.

 

 

 

40位 Responsive Accordion

 

See the Pen Responsive Accordion (Background Images) by Michael Ferry (@ferry) on CodePen.

 

 

 

34位 Login Box Concept

ログインボタンを押すと、立体的にパネルが移動するインタラクティブな作品。

 

See the Pen Login Box Concept by Jamie Coulter (@jcoulterdesign) on CodePen.

 

 

 

33位 Pure CSS Questionnaire Concept

カーソルに合わせて、スクリーン画面を自由に切り替えるCSSテクニック。

 

See the Pen Pure CSS Questionnaire Concept (hover items) by Nikolay Talanov (@suez) on CodePen.

 

 

 

30位 CSS-only Colorful Calendar Concept

CSSだけでデザインしたと思えないほど、自由な操作感を実現したインターフェース。

 

See the Pen CSS-only Colorful Calendar Concept by David Khourshid (@davidkpiano) on CodePen.

 

 

 

25位 Add to Cart Interaction

商品を直感的にカートに入れることができる、ショッピングサイト向けテクニック。

 

See the Pen Add to cart interaction by Virgil Pana (@virgilpana) on CodePen.

 

 

 

24位 Marvel Logo Animation

@keyframeアニメーションを利用した、フラッシュのようなイントロページを作成します。

 

See the Pen Marvel Logo animation | pure CSS by Gregor Adams (@pixelass) on CodePen.

 

 

 

19位 One Page Navigation CSS Menu

カーテン式にコンテンツが切り替えることができる、アイコンを利用した効果的なナビメニュー。

 

See the Pen One Page Navigation CSS Menu by Alberto Hartzet (@hrtzt) on CodePen.

 

 

 

18位 SVG Low PolyLion: Animated Polygons

ポリゴンスタイルで描かれたライオンが、アニメーション付きで出現します。

 

See the Pen SVG Low PolyLion: Animated Polygons by GRAY GHOST (@grayghostvisuals) on CodePen.

 

 

 

16位 Pure CSS Progress

超立体的にデザインされたプログレスバーは、なんとHTML/CSSのみで作成されています。

 

See the Pen Pure CSS Progress by Rafael González (@rgg) on CodePen.

 

 

 

12位 Pull Down to Refresh

ヘッダー部分を下にドラッグすると、紙飛行機が飛び、コンテンツを読み込みます。

 

See the Pen Pull Down to Refresh (Paper Plane) by Nikolay Talanov (@suez) on CodePen.

 

 

 

10位 Flipside

ボタンをクリックすると、回転しながらパネルが表示されます。

 

See the Pen Flipside by Hakim El Hattab (@hakimel) on CodePen.

 

 

 

7位 Motion for the web

アニメーションたっぷりに表現される、新しいロゴデザインの可能性を提案しています。

 

See the Pen ·● MOTION for the web ●· by LegoMushroom (@sol0mka) on CodePen.

 

 

 

5位 10 Stylish Hover Effects with LESS

10種類のユニークなCSSホバーエフェクトをまとめています。

 

See the Pen 10 stylish hover effects with less by Renan C. Araujo (@caraujo) on CodePen.

 

 

 

1位 Chill the Lion

そして堂々の1位は、マウスカーソルでライオンと戯れることができる作品。

 

See the Pen Chill the lion by Karim Maaloul (@Yakudoo) on CodePen.

 

 

 

参照元リンク : The Most Hearted of 2015 – CodePen