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.
CSSのみでスタイリングされたローディングアニメーション6個。
See the Pen
CSS Loading Animations by Alex (@AlexWarnes)
on CodePen.
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.
人工知能を活用し、絶えず形を変えるモコモコとしたシェイプを自動生成します。
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.
一つの書体の太さや幅などを自由に調整できる新しい技術、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.
動画を使った背景イメージや、フルスクリーンで展開するスライダーなど、クリエティブなポートフォリオ作成に便利なスニペット。
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.
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.
ポケモンカードをキラキラと輝かせ、マウスエフェクトにも対応されたインタラクティブな仕様。
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.
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.
レゴブロックのミニチュア・フィギュアをお好みにあわせて、着せかえ人形のようにデザインできるジェネレーター。
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.
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.
注文完了ボタンをクリックすると、トラックが荷物を配送してくれるアニメーションエフェクト。
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.
背景が透けたすりガラスのような質感を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.
マウスをスクロールすると、グリッチエフェクトをつかったタロットカードがくるくると回りだします。
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.
右下に設置されたボタンをクリックしようとすると、マウスカーソルが盗まれてしまいます。
See the Pen
Click the button! by Bård N Hovde (@bnhovde)
on CodePen.
そして2019年にもっとも人気のあったスニペットは、入力と同時に表示されたクレジットカードに反映される、コンバージョン率がアップしそうなテクニックとなりました。
See the Pen
Credit Card Form – VueJs by Muhammed Erdem (@JavaScriptJunkie)
on CodePen.
