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ファイルをつかったテクニック。
See the Pen A Motion Blurred Number with CSS / SVG / JS by Konstantin Denerz (@konstantindenerz) on CodePen.
83位 Draw With WebGL Flowers [2]
画面上でクリックしたところに、きれいで鮮やかな花が描かれるWebGLアニメーション。
See the Pen Draw With WebGL Flowers [2] by Ksenia Kondrashova (@ksenia-k) on CodePen.
マウスカーソルを合わせるとキラッときらめくボタンは、HTML/CSSのみでスタイリングされています。
See the Pen CSS Only Shimmer Button by Simon Goellner (@simeydotme) on CodePen.
80位 (Svelte) Range Slider Pips fancy example
アニメのような自然な動きが特長の、グラデーションカラーを採用した金額レンジスライダー。
See the Pen (Svelte) Range Slider Pips fancy example by Simon Goellner (@simeydotme) on CodePen.
ラテやカプチーノ、エスプレッソといったコーヒーがどのような配合でできているのか、分かりやすいヴィジュアルで知ることができます。
See the Pen For The Love Of Coffee by Rafa (@RAFA3L) on CodePen.
グラデーションが少しずつ変化するアニメーションに、ザラザラとした質感を加えたテキストエフェクト。文字をお好みで編集することも可能です。
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サイトの配色をリアルタイムでサクサクと切り替えることができるスニペット。
See the Pen Realtime Colors v1: Visualize Your Colors on a Real Website by Juxtopposed (@Juxtopposed) on CodePen.
69位 Glide To Reveal with CSS :has()
マウスホバーした部分のみくっきりと表示し、他はぼかしで隠してしまうCSSの:hasセレクタを利用したテクニック。
See the Pen Glide To Reveal with CSS :has() by Jhey (@jh3y) on CodePen.
68位 3D Cards
まるで動物や鳥たちが飛び出したような、奥行き感のある3Dカードエフェクト。
See the Pen 3D Cards by Mubanga (@mubangadv) on CodePen.
リアルな寝室のインテリアをマウスドラッグで自由に、向きや角度を回転できる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のみで表現。マウスホバーしたキャラクターのみ強調でき、名前と一緒に表示されます。
See the Pen Character Showcase Gallery by Ethan (@pleasedonotdisturb) on CodePen.
41位 Movie card with hover effect
マウスホバーすると詳細の抜粋テキストやお気に入り保存アイコンなどが、滑らかなアニメーション付きで表示されるCSSホバーエフェクト。
See the Pen Movie card with hover effect by Julien Sulpis (@jsulpis) on CodePen.
がりがりと歯で噛んでいるようなトグルスイッチ。電源ランプの赤と緑がトグルに反射した様子もリアルに再現しています。
See the Pen Toothed Toggle – CSS by Josetxu (@josetxu) on CodePen.
See the Pen Hover Effect from Ludwig Video by Hyperplexed (@Hyperplexed) on CodePen.
マウスを動かした方向をちらっと見て、クリックした場所にヨチヨチ歩いて近寄ってくる、ピクセルドットの子犬がかわいすぎる。
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.
マウスカーソルの場所に応じて、隣接するカードの縁がネオンカラーに輝きだすカードホバーエフェクト。細かいカスタマイズも可能です。
See the Pen Proximity Glow Cards by Jhey (@jh3y) on CodePen.
31位 CSS Responsive Scroll-Driven Text Reveals [Chrome 115+]
CSSで新しく実現できるようになった「スクロール駆動アニメーション」による、スクロールに合わせて文字テキストを表示していくテクニック。
See the Pen CSS Responsive Scroll-Driven Text Reveals [Chrome 115+] by Jhey (@jh3y) on CodePen.
28位 Spell Caster
台座の上に乗ったダイヤモンドを悪魔たちから守ろう。古代の魔法を使い、空中で呪文を唱えることでクリスタルを守ることができます。（マウスで決められたシェイプを描こう。）
See the Pen Spell Caster by Steve Gardner (@ste-vg) on CodePen.
マウススクロール対応のカード型カルーセルは、中心の一枚のみを強調するため、左右のカードにはぼかしを加えます。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.
マウスホバーで映画の詳細情報が下からスライドインするCSSテクニック。
See the Pen Movie Poster Interaction by Ethan (@pleasedonotdisturb) on CodePen.
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にして、天気を選ぶとそれに応じたイラストアニメーションが表示。さらに横についている「ロケット」や「ネッシー」ボタンをクリックすると、イラストの中に登場させることもできますよ。しかもレスポンシブもいける神対応。
タイトルの通り、オーロラのように美しいグラデーションが印象的なテキストアニメーション。CSSのみでできています。
See the Pen The aurora (only CSS) by Ostylowany (@ostylowany) on CodePen.
7位 Responsive Image Carousel ( Animation )
画像カルーセルに合わせて背景が切り替わる、レスポンシブ対応のスライダーテクニック。
See the Pen Responsive Image Carousel ( Animation ) by noirsociety (@noirsociety) on CodePen.
5位 Night && Day Toggle [Completed It!]
昼と夜をトグルで切り替え、雲のあいだから飛行機が飛んできたり、月明かりで星がきらりと輝くなど、狭い空間を最大限に活用しています。
See the Pen Night && Day Toggle [Completed It!] by Jhey (@jh3y) on CodePen.
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.
ここからがベスト３。
第三位は、マウスカーソルを合わせたエリアのみぼんやりと輝きだすカードホバーエフェクトでした。
ベスト100のの中にも、「カードの縁が光る系」のホバーエフェクトがいくつかランクイン。特にダーク系UIとの相性が良さそうです。
See the Pen glowy hover effect by Ines (@inescodes) on CodePen.
第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年間のトップ１００も良かったらいかがでしょう。どれだけのスピードでWebが進化しているか、よく分かる実例のひとつ。
