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.
サムネイルなどに活用したい、シンプルな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.
CSSのみでスタイリングされた、インタラクティブな動きに注目。
See the Pen CSS Inbox User Interface by Jamie Coulter (@jcoulterdesign) on CodePen.
コピペで実装できる、HTML/CSSスニペットが各種揃います。
See the Pen Navigation Animation by EvyatarDa (@EvyatarDa) on CodePen.
アイコンフォントとCSSのみで作成された、アニメーション付き天気予報。
See the Pen Animated Weather Icons by Josh Bader (@joshbader) on CodePen.
カードをクリックすると、パタパタと詳細コンテンツが表示されます。
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.
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.
マウスを動かすことで猫じゃらしを使って、猫と遊ぶことができます。
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.
記事一覧ページなどに使える、立体感のあるカード式レイアウト。
See the Pen Article News Card by Andy Tran (@andytran) on CodePen.
See the Pen Responsive Accordion (Background Images) by Michael Ferry (@ferry) on CodePen.
ログインボタンを押すと、立体的にパネルが移動するインタラクティブな作品。
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.
商品を直感的にカートに入れることができる、ショッピングサイト向けテクニック。
See the Pen Add to cart interaction by Virgil Pana (@virgilpana) on CodePen.
@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.
超立体的にデザインされたプログレスバーは、なんとHTML/CSSのみで作成されています。
See the Pen Pure CSS Progress by Rafael González (@rgg) on CodePen.
ヘッダー部分を下にドラッグすると、紙飛行機が飛び、コンテンツを読み込みます。
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.
アニメーションたっぷりに表現される、新しいロゴデザインの可能性を提案しています。
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位は、マウスカーソルでライオンと戯れることができる作品。
See the Pen Chill the lion by Karim Maaloul (@Yakudoo) on CodePen.
参照元リンク : The Most Hearted of 2015 – CodePen
