Advertisement

top_pens_of_2019_on_codepen-1

 

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

 

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

 

 

詳細は以下から。

 

 

コード共有サイト Codepen で2019年に話題となったHTMLスニペット・ベスト100

 

99位 SVG Hamburger Menu Icon Animation Collection

ハンバーガーメニューのさまざまなSVGアニメーションエフェクトをコレクションしています。

See the Pen
SVG Hamburger Menu Icon Animation Collection
by Matthew Main (@matthewmain)
on CodePen.

 

 

 

94位 CSS Loading Animations

CSSのみでスタイリングされたローディングアニメーション6個。

See the Pen
CSS Loading Animations
by Alex (@AlexWarnes)
on CodePen.

 

 

 

91位 CSS Grid: Style Guide II

CSS Gridプロパティを利用したオンラインで確認できるスタイルガイド。

See the Pen
CSS Grid: Style Guide II
by Olivia Ng (@oliviale)
on CodePen.

 

 

 

89位 Pure CSS Only Portrait – Isla

すべてCSSのみでスタイリングされた、リアルすぎるポートレイト写真。

See the Pen
Pure CSS Only Portrait – Isla
by Ben Evans (@ivorjetski)
on CodePen.

 

 

 

84位 Shooting Star

マウスカーソルの動きに合わせてキラキラと輝く軌跡を描くことができる美しいエフェクト。

See the Pen
Shooting Star
by Ko.Yelie (@ko-yelie)
on CodePen.

 

 

 

81位 AI Assistant Blob

人工知能を活用し、絶えず形を変えるモコモコとしたシェイプを自動生成します。

See the Pen
AI Assistant Blob
by Aaron Iker (@aaroniker)
on CodePen.

 

 

 

80位 Random Password Generator – HTML | CSS | JS

ランダムでパスワードを自動生成してくれるスクリプト。アルファベット大小、数字含むなどの条件を自由に追加できます。

See the Pen
Random Password Generator – HTML | CSS | JS
by Dev Loop (@dev_loop)
on CodePen.

 

 

 

79位 Variable font animation

一つの書体の太さや幅などを自由に調整できる新しい技術、VariableフォントとCSSで表現されたテキストアニメーション。

See the Pen
Variable font animation
by Michelle Barker (@michellebarker)
on CodePen.

 

 

 

77位 UI Kit for #codepenchallenge

SCSSでスタリングされたUIコンポーネント集で、基本となる配色やボタン、入力フォームなどがまとめられています。

See the Pen
UI Kit for #codepenchallenge
by Aaron Iker (@aaroniker)
on CodePen.

 

 

 

69位 Only CSS: STARFOX Arwing Drone

マウスカーソルの動きに合わせて、CSSのみでスタイリングされたスターシップを操作できます。

See the Pen
Only CSS: STARFOX Arwing Drone
by Yusuke Nakaya (@YusukeNakaya)
on CodePen.

 

 

 

66位 Agency website POC

動画を使った背景イメージや、フルスクリーンで展開するスライダーなど、クリエティブなポートフォリオ作成に便利なスニペット。

See the Pen
Agency website POC
by Jamie Coulter (@jcoulterdesign)
on CodePen.

 

 

 

65位 Arrow animation

ブログなどのページ送りにCSSマイクロインタラクションを加えたスニペット。

See the Pen
Arrow animation
by Aaron Iker (@aaroniker)
on CodePen.

 

 

 

63位 Flipping Out

面白いアニメーション付きのアスキーアートをCSSのみで作成します。

See the Pen
Flipping Out
by Jon Kantner (@jkantner)
on CodePen.

 

 

 

60位 Walking Sprites Demo

CSSスプライトの技術を使うことで、ピクセルドットで表現されたゲームキャラクターを歩かせることができます。矢印で方向を決めましょう。

See the Pen
Walking Sprites Demo
by Drew Conley (@punkydrewster713)
on CodePen.

 

 

 

56位 ThreeJS Hover Zoom Channel Displacement

マウスカーソルの動きに合わせて、画像にグリッチ、ズームエフェクトが加えられるギミック。

See the Pen
ThreeJS Hover Zoom Channel Displacement
by TheFrost (@frost084)
on CodePen.

 

 

 

52位 Drop-down menu

アニメーション付きで展開するドロップダウンメニューのスニペット。注目のダークモードにも対応。

See the Pen
Drop-down menu
by Ivan Grozdic (@ig_design)
on CodePen.

 

 

 

50位 Pokemon Card Holo Effect

ポケモンカードをキラキラと輝かせ、マウスエフェクトにも対応されたインタラクティブな仕様。

See the Pen
Pokemon Card Holo Effect
by Simon Goellner (@simeydotme)
on CodePen.

 

 

 

46位 Hover slider (dark/light) – ver 3

カーソルを合わせることでスライダーがフルスクリーンで切り替わります。

See the Pen
Hover slider (dark/light) – ver 3
by Ivan Grozdic (@ig_design)
on CodePen.

 

 

 

42位 CSS Animations: Obvious CTA Buttons

クリックすると絵文字が飛び出すボタンエフェクトコレクション。

See the Pen
CSS Animations: Obvious CTA Buttons
by Olivia Ng (@oliviale)
on CodePen.

 

 

 

41位 Only CSS: 3D Scan

CSSのみでスタイリングされたと思えないほど立体的なグラデーションが特徴のスニペット。

See the Pen
Only CSS: 3D Scan
by Yusuke Nakaya (@YusukeNakaya)
on CodePen.

 

 

 

40位 Paw Clap Button

ボタンをクリックすると猫の手をハイタッチするアニメーションエフェクト。

See the Pen
Paw Clap Button
by Aaron Iker (@aaroniker)
on CodePen.

 

 

 

39位 CSS LEGO Minifigure Maker

レゴブロックのミニチュア・フィギュアをお好みにあわせて、着せかえ人形のようにデザインできるジェネレーター。

See the Pen
CSS LEGO Minifigure Maker
by Josh Bader (@joshbader)
on CodePen.

 

 

 

32位 NEON LOVE

リアルなネオンエフェクトをWebGLの技術で再現したスニペット。

See the Pen
NEON LOVE
by al-ro (@al-ro)
on CodePen.

 

 

 

31位 CSS Grid: Card Variations

CSS Gridをつかってスタイリングされた、さまざまな形のカード型レイアウト各種をまとめたコレクション。

See the Pen
CSS Grid: Card Variations
by Olivia Ng (@oliviale)
on CodePen.

 

 

 

29位 Back to top with progress indicator

ページを下にスクロールしたときに便利な、トップに戻るボタンとコンテンツの長さを同時に表現した新しいスタイリング。

See the Pen
Back to top with progress indicator
by Ivan Grozdic (@ig_design)
on CodePen.

 

 

 

25位 Order confirm animation

注文完了ボタンをクリックすると、トラックが荷物を配送してくれるアニメーションエフェクト。

See the Pen
Order confirm animation
by Aaron Iker (@aaroniker)
on CodePen.

 

 

 

22位 Clip Clop Clippity Clop [CSS Only]

CSSのみでスタイリングされた走る馬は、クリックすると詳しい構造を確認することができます。

See the Pen
Clip Clop Clippity Clop [CSS Only]
by Steve Gardner (@ste-vg)
on CodePen.

 

 

 

18位 React Slider w/ Hover Effect

ホバーズームエフェクトを搭載したフルスクリーン型イメージスライダー。

See the Pen
React Slider w/ Hover Effect
by Ryan Mulligan (@hexagoncircle)
on CodePen.

 

 

 

16位 CSS Grid: Magazine Layouts

雑誌のようなレイアウトをCSS Gridプロパティを用いて表現しています。あらゆるレイアウトの可能性を感じるスニペット。

See the Pen
CSS Grid: Magazine Layouts
by Olivia Ng (@oliviale)
on CodePen.

 

 

 

13位 CSS – Frosted Glass

背景が透けたすりガラスのような質感をCSSオンリーで表現した注目のスニペット。

See the Pen
CSS – Frosted Glass
by Kyle Wetton (@kylewetton)
on CodePen.

 

 

 

9位 The Cube

バラバラにしたルービックキューブを完成させるオンライン型ミニゲーム。ダブルクリックでシャッフルできます。

See the Pen
The Cube
by Boris Šehovac (@bsehovac)
on CodePen.

 

 

 

8位 Displacement Scroll

マウスをスクロールすると、グリッチエフェクトをつかったタロットカードがくるくると回りだします。

See the Pen
Displacement Scroll
by Matthew Willox (@mwmwmw)
on CodePen.

 

 

 

6位 Color this sofa! – SVG + Blend Mode trick

ソファの色をお好みでカスタマイズすることができるスニペットは、SVGとブレンドモードを活用したテクニック。

See the Pen
Color this sofa! – SVG + Blend Mode trick
by Kyle Wetton (@kylewetton)
on CodePen.

 

 

 

5位 Simple CSS Waves | Mobile & Full width

ユラユラと揺らめく波をCSSのみで表現したスニペット。ウェブサイトのフッターなどにも最適なアイデア。

See the Pen
Simple CSS Waves | Mobile & Full width
by Goodkatz (@goodkatz)
on CodePen.

 

 

 

3位 Click the button!

右下に設置されたボタンをクリックしようとすると、マウスカーソルが盗まれてしまいます。

See the Pen
Click the button!
by Bård N Hovde (@bnhovde)
on CodePen.

 

 

 

1位 Credit Card Form – VueJs

そして2019年にもっとも人気のあったスニペットは、入力と同時に表示されたクレジットカードに反映される、コンバージョン率がアップしそうなテクニックとなりました。

See the Pen
Credit Card Form – VueJs
by Muhammed Erdem (@JavaScriptJunkie)
on CodePen.

 

参照元リンク : The Most Hearted of 2019 – Codepen.io