2023年Codepenベスト100発表 ロックなHTMLスニペットがずらり

HTMLなどのコードを、ブラウザ上で確認ができ、公開や共有もできる開発サービスCodepen(コードペン)。

この記事では、2023年に特に人気の高かったHTMLスニペットを、ランキング形式でまとめた The Most Hearted of 2023の中から、印象に残った素敵な作品をご紹介。

2023年に話題となったWebサイトでも見かける、参考にしたくなる魅力的なエフェクトやテクニックに多くのハートが集まっています。

HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。

99位 Glowing Dropdown

マウスカーソルを合わせると、縁だけが青と紫色のネオン色にきらりと光るドロップダウンメニュー。

See the Pen Glowing Dropdown by LukyVJ (@LukyVj) on CodePen.

96位 A Motion Blurred Number with CSS / SVG / JS

ものすごい勢いで回転している数字カウンター。SVGファイルをつかったテクニック。

83位 Draw With WebGL Flowers [2]

画面上でクリックしたところに、きれいで鮮やかな花が描かれるWebGLアニメーション。

See the Pen Draw With WebGL Flowers [2] by Ksenia Kondrashova (@ksenia-k) on CodePen.

82位 CSS Only Shimmer Button

マウスカーソルを合わせるとキラッときらめくボタンは、HTML/CSSのみでスタイリングされています。

See the Pen CSS Only Shimmer Button by Simon Goellner (@simeydotme) on CodePen.

80位 (Svelte) Range Slider Pips fancy example

アニメのような自然な動きが特長の、グラデーションカラーを採用した金額レンジスライダー。

75位 For The Love Of Coffee

ラテやカプチーノ、エスプレッソといったコーヒーがどのような配合でできているのか、分かりやすいヴィジュアルで知ることができます。

See the Pen For The Love Of Coffee by Rafa (@RAFA3L) on CodePen.

74位 Grainy & Gradients text

グラデーションが少しずつ変化するアニメーションに、ザラザラとした質感を加えたテキストエフェクト。文字をお好みで編集することも可能です。

See the Pen Grainy & Gradients text by LukyVJ (@LukyVj) on CodePen.

72位 Fancy hover effect on avatar

マウスホバーすると人物アバターのみがズームアップし、背景のサークル円からはみ出るCSSオンリーエフェクト。

See the Pen Fancy hover effect on avatar by Temani Afif (@t_afif) on CodePen.

70位 Realtime Colors v1: Visualize Your Colors on a Real Website

Spaceバーをタップするたびに、Webサイトの配色をリアルタイムでサクサクと切り替えることができるスニペット。

69位 Glide To Reveal with CSS :has()

マウスホバーした部分のみくっきりと表示し、他はぼかしで隠してしまうCSSの:hasセレクタを利用したテクニック。

68位 3D Cards

まるで動物や鳥たちが飛び出したような、奥行き感のある3Dカードエフェクト。

See the Pen 3D Cards by Mubanga (@mubangadv) on CodePen.

63位 3D Room – ThreeJS

リアルな寝室のインテリアをマウスドラッグで自由に、向きや角度を回転できるThreeJSデモ。

See the Pen 3D Room – ThreeJS by Ricardo Oliva Alonso (@ricardoolivaalonso) on CodePen.

58位 3D Ecommerce Experience with Spline

スニーカーをクリックすると、足をけりだすように立体的にアニメーションするテクニックは、Webベースで複雑なアニメーションを作成できるSplineを利用して表現しています。

See the Pen 3D Ecommerce Experience with Spline by Jorge Cheevers (@jorgecheevers) on CodePen.

49位 マウスに追従するゴースト型のカーソルエフェクト。WegGLで表現しており、ゴーストのサイズや色も自由にカスタマイズできます。クリックすると顔が変化するギミックも。

See the Pen WebGL Ghost Cursor (2023 update) by Ksenia Kondrashova (@ksenia-k) on CodePen.

47位 Bookmark App – View Transition

View Transition APIを利用した、連続性のある画面遷移アニメーションを活用したレイアウト。

See the Pen Bookmark App – View Transition by Aysenur Turk (@TurkAysenur) on CodePen.

46位 Responsive, Glittery Bank Card

CSSのみでスタイリングされた、角度によってキラキラと輝くグリッター効果を加えた3Dカードで、レスポンシブにも対応しています。

See the Pen Responsive, Glittery Bank Card by Simon Goellner (@simeydotme) on CodePen.

44位 Character Showcase Gallery

キャラクターやチームメンバー紹介用のギャラリーレイアウトをCSSのみで表現。マウスホバーしたキャラクターのみ強調でき、名前と一緒に表示されます。

41位 Movie card with hover effect

マウスホバーすると詳細の抜粋テキストやお気に入り保存アイコンなどが、滑らかなアニメーション付きで表示されるCSSホバーエフェクト。

See the Pen Movie card with hover effect by Julien Sulpis (@jsulpis) on CodePen.

40位 Toothed Toggle – CSS

がりがりと歯で噛んでいるようなトグルスイッチ。電源ランプの赤と緑がトグルに反射した様子もリアルに再現しています。

See the Pen Toothed Toggle – CSS by Josetxu (@josetxu) on CodePen.

39位 Hover Effect from Ludwig Video

同じ画像を何枚も重ねることで再現できるカード型ホバーエフェクト。

See the Pen Hover Effect from Ludwig Video by Hyperplexed (@Hyperplexed) on CodePen.

38位 interactive puppy

マウスを動かした方向をちらっと見て、クリックした場所にヨチヨチ歩いて近寄ってくる、ピクセルドットの子犬がかわいすぎる。

See the Pen interactive puppy by Masahito Leo Takeuchi (@Ma5a) on CodePen.

34位 Future Sticky Navigation with Glas Effect

半透明ガラスエフェクトを用いた固定ナビゲーションは、リンクをクリックするとワープするようなアニメーション付きで各コンテンツまで移動します。

See the Pen Future Sticky Navigation with Glas Effect by Benjamin Koehler (@codesuey) on CodePen.

33位 Proximity Glow Cards

マウスカーソルの場所に応じて、隣接するカードの縁がネオンカラーに輝きだすカードホバーエフェクト。細かいカスタマイズも可能です。

See the Pen Proximity Glow Cards by Jhey (@jh3y) on CodePen.

31位 CSS Responsive Scroll-Driven Text Reveals [Chrome 115+]

CSSで新しく実現できるようになった「スクロール駆動アニメーション」による、スクロールに合わせて文字テキストを表示していくテクニック。

28位 Spell Caster

台座の上に乗ったダイヤモンドを悪魔たちから守ろう。古代の魔法を使い、空中で呪文を唱えることでクリスタルを守ることができます。(マウスで決められたシェイプを描こう。)

See the Pen Spell Caster by Steve Gardner (@ste-vg) on CodePen.

26位 Carousel #swiperjs #flex

マウススクロール対応のカード型カルーセルは、中心の一枚のみを強調するため、左右のカードにはぼかしを加えます。Swiper JSを使用。

See the Pen Carousel #swiperjs #flex by Kristen (@kristen17) on CodePen.

25位 Nixie Tube Clock

ヴィンテージなニキシー間を使用して現在時刻を表示できる時計デモ。下にあるボタンをクリックしてみましょう。

See the Pen Nixie Tube Clock by Rafa (@RAFA3L) on CodePen.

23位 Movie Poster Interaction

マウスホバーで映画の詳細情報が下からスライドインするCSSテクニック。

19位 Responsive Dashboard | Bento Style

日本の弁当箱をコンセプトにした「Bento UIスタイル」を取り入れた、レスポンシブ対応のダッシュボード向けレイアウト。

See the Pen Responsive Dashboard | Bento Style by Ecem Gokdogan (@ecemgo) on CodePen.

18位 CSS God Rays

まるでオーロラのように輝く光のアニメーションをCSSのみで表現したテクニック。ダークモードにも対応しています。

See the Pen CSS God Rays by Tim Wilson (@TWilson) on CodePen.

10位 ClimaCode

電源をONにして、天気を選ぶとそれに応じたイラストアニメーションが表示。さらに横についている「ロケット」や「ネッシー」ボタンをクリックすると、イラストの中に登場させることもできますよ。しかもレスポンシブもいける神対応。

See the Pen ClimaCode by Rafa (@RAFA3L) on CodePen.

8位 The aurora (only CSS)

タイトルの通り、オーロラのように美しいグラデーションが印象的なテキストアニメーション。CSSのみでできています。

See the Pen The aurora (only CSS) by Ostylowany (@ostylowany) on CodePen.

7位 Responsive Image Carousel ( Animation )

画像カルーセルに合わせて背景が切り替わる、レスポンシブ対応のスライダーテクニック。

5位 Night && Day Toggle [Completed It!]

昼と夜をトグルで切り替え、雲のあいだから飛行機が飛んできたり、月明かりで星がきらりと輝くなど、狭い空間を最大限に活用しています。

4位 Modern Button Styles – 45 CSS Only Buttons

コピペで利用できる45種類のボタンホバーエフェクトを集めたミニライブラリ。このほかにも500種類以上のCSSボタンがコピペ利用できます。

See the Pen Modern Button Styles – 45 CSS Only Buttons by Vincent Van Goggles (@Gogh) on CodePen.

3位 glowy hover effect

ここからがベスト3。

第三位は、マウスカーソルを合わせたエリアのみぼんやりと輝きだすカードホバーエフェクトでした。

ベスト100のの中にも、「カードの縁が光る系」のホバーエフェクトがいくつかランクイン。特にダーク系UIとの相性が良さそうです。

See the Pen glowy hover effect by Ines (@inescodes) on CodePen.

2位 3D Card Hover

第2位には、またしても素敵なカードホバーエフェクトがランクインです。

マウスホバーに合わせ、別のキャラクターが立体的に表示されるアニメーションは、きっとクリックしたくなります。

See the Pen 3D Card Hover by Gayane Gasparyan (@gayane-gasparyan) on CodePen.

1位 Carousel with drag and wheel

2023年Codepenでもっともハートを集めたスニペットがこちら。

マウスドラッグとスクロールのどちらでもカードを左右にスクロールでき、直感的にカードを選ぶことができるカルーセル。何度も触りたくなる滑らかすぎるアニメーションは、まるでカードを本当に触っているような不思議な感覚。

See the Pen Carousel with drag and wheel by Fabio Ottaviani (@supah) on CodePen.

今回は掲載しきれなかった他のスニペットは、Top Pens of 2023 on CodePenより確認できます。

直近3年間のトップ100も良かったらいかがでしょう。どれだけのスピードでWebが進化しているか、よく分かる実例のひとつ。