これどうやるの?2024年Codepenベスト100発表 コピペできるHTMLスニペットまとめ

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

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

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

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

97位 gsap ScrollTrigger Image Zoom

スクロールに合わせてSVGの茂みの影から画像がズームするGSAPのScrollTriggerエフェクト。

96位 Squishy

実際にボタンを押したような質感をCSSのみで表現したボタンホバーエフェクト。

See the Pen Squishy by Håvard Brynjulfsen (@havardob) on CodePen.

82位 Shimmer wave text animation

文字テキストがきらりと輝くアニメーションで、ほんのわずかなJavaScriptを追加すれば実現できるテクニック。

See the Pen Shimmer wave text animation by Andreas Storm (@avstorm) on CodePen.

81位 Day/Night Lighthouse Illustration – CSS

CSSのみで描かれたとは思えない灯台は、回転する光が印象的で日中と夜間の切り替えも可能。

80位 Silky smooth checkbox toggles with SVG.js

滑らかなフェードイン&スライドインアニメーションで、 ピクセルドットのゲーム要素を加えたチェックボックス。

See the Pen Silky smooth checkbox toggles with SVG.js by Josh Dillon (@jdillon) on CodePen.

 

78位 Elastic Custom Cursor Following Mouse (Squeeze and Rotate) w/ JavaScript

マウスを動かす速度によって丸みが立体的に変化するカスタムカーソル。

69位 intro grid section

グリッド状に並べられた画像が左右にスクロールしながらボタンのクリックを促す、訴求力の高いヒーローイメージ。CSS Gridを活用したスニペット。

See the Pen intro grid section by misala (@p0waqqatsi) on CodePen.

65位 404 Error Room – CSS

CSSのみでできているとは思えないほど遠近感たっぷりな404エラーページ向けスニペット。

See the Pen 404 Error Room – CSS by Josetxu (@josetxu) on CodePen.

61位 Scroll to the Abyss

スクロールすることで黄色の潜水艦が深海1万メートルに向かって進んでいくスクロールアニメーション。

See the Pen Scroll to the Abyss by Alexandre Vacassin (@alexandrevacassin) on CodePen.

60位 CSS only marquee with slow on hover

左右に文字が流れるMarqueeテキストをCSSのみで表現できるスニペットで、ホバーするとアニメーションが停止します。

See the Pen CSS only marquee with slow on hover by Matthew Morete (@matthewmorete) on CodePen.

57位 Sphere Packing

ランダムな色に輝く無数の球体スフィアを画面いっぱいに詰め込み、ページ下にある「重力ボタン」で一気に球体が浮かび上がります。

See the Pen Sphere Packing by Kevin Levron (@soju22) on CodePen.

50位 Multiple Glow effects Button

点滅や波型、ワイプ型など計6種類のエフェクトを楽しむことができるボタンホバー用スニペット。

See the Pen Multiple Glow effects Button by Simon Goellner (@simeydotme) on CodePen.

47位 WebGL Fluid Simulation With Your Text

右上にある「Control」より文字テキストを入力すると、インクが水に溶けたようなエフェクトとともに表示されるWebGLアニメーション。

See the Pen WebGL Fluid Simulation With Your Text by Ksenia Kondrashova (@ksenia-k) on CodePen.

41位 Lightspeed

光の速さでワープ移動する空間を表現した超未来的なWebスニペット。

See the Pen Lightspeed by Matthias Hurrle (@atzedent) on CodePen.

40位 Pure CSS header animation to sticky nav

スクロールに合わせてヘッダーが七色に伸縮するCSSアニメーションが印象的。

38位 Radios With Sliding Focus

上下にスライドしながらフォーカス項目が変更されるラジオボタン向けCSSアニメーション。

See the Pen Radios With Sliding Focus by Jon Kantner (@jkantner) on CodePen.

35位 Toggle Pill

Inputプロパティを利用してトグルのオン・オフを切り替えることができる、CSSのみでできるテクニック。

See the Pen Toggle Pill by Alvaro Montoro (@alvaromontoro) on CodePen.

29位 Outline-to-Fill Tab Icon Animations

アイコンをクリックするとアウトライン型からかわいいマイクロインタラクション付きで塗りつぶし型に変化するナビメニュー。

See the Pen Outline-to-Fill Tab Icon Animations by Jon Kantner (@jkantner) on CodePen.

28位 Step Indicator

ボタンをクリックするとステップを前後に戻ることができるアニメーション付きインディケーター。

See the Pen Step Indicator by Jon Kantner (@jkantner) on CodePen.

25位 Scroll Driven Portal Layout

サイズの異なる複数のカードがポータルを通過すると、スクロールに合わせてきれいに整列するスクロール駆動型アニメーション。

See the Pen Scroll Driven Portal Layout by Jhey (@jh3y) on CodePen.

22位 Shiny call-to-action button

ボタンのエッジがきらりが輝くエフェクトは、ホバーすると動きがスローモーションになる仕掛けも。色もcss変数で柔軟に変更できます。

See the Pen Shiny call-to-action button by Ryan Mulligan (@hexagoncircle) on CodePen.

21位 CSS only navigation with rotating text hover effect

マウスホバーすると、アイコン付きでサークル状に回りだすユニークなナビゲーションメニュー。

20位 Text Illumination

iPhone 16 Proのランディングページで使われていた輝くテキストエフェクトを完全再現したスニペット。

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

18位 Single Keyframe Tricks

1行の@keyframesで表現できる魅力的なアニメーション9種類を揃えたミニライブラリ。

See the Pen Single Keyframe Tricks by David East (@davideast) on CodePen.

13位 Responsive Dashboard with Sliders and Music Player

画像スライダーと音楽プレイヤーが搭載されたレスポンシブなダッシュボード画面。

12位 Diorama – ThreeJS

古いデスクトップ型パソコン画面の中に照明が当たる空間が広がるジオラマのようなThreeJSスニペット。マウスで左右に回転、ズームできる仕様。

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

11位 Eclipse Hero

ダークな背景に細かい星の動きや、テキストがきらりと光るアニメーションなど細部にこだわったヒーローイメージ。

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

10位 Signature animation

アルファベットで入力すると手描きした署名サイン風に仕上げてくれるアニメーション。

See the Pen Signature animation by Kiran Patel (@kiranpate1) on CodePen.

8位 Responsive GSAP Slider with Button Wave Effect

リンゴや洋ナシ、パッションフルーツがふわふわと浮かびながら画像が切り替わる、GSAPをつかったインタラクティブなスライダー。

See the Pen Responsive GSAP Slider with Button Wave Effect by Yudiz Solutions Limited (@yudizsolutions) on CodePen.

7位 3D wave animation

マウスカーソルを合わせた要素に沿って波型アニメーションが印象的な3Dホバーエフェクト。

See the Pen 3D wave animation by Thea (@HighFlyer) on CodePen.

5位 Fancy Fading Footer

コンテンツがぼんやりフェードアウトしながら出現する没入感たっぷりなフッター用アニメーション。

See the Pen Fancy Fading Footer by  Juxtopposed (@Juxtopposed) on CodePen.

4位 Interactive Gradient & Glassmorphism with noise

色が絶えず変化するグラデーション背景に、ざらっとしたノイズ間のあるグラスエフェクトを再現。

3位 Cards with inverted border-radius #scss

カードの隅をえぐるように反転させるborder-radiusをつかったデザインの小技テクニック。

2位 ScrollTrigger Image Zoom

マウスカーソルを下に移動すると丸い小窓から外の美しい風景へとズームするエフェクトは、GSAPをつかったテクニックのひとつ。

See the Pen ScrollTrigger Image Zoom by GSAP (@GreenSock) on CodePen.

1位 CSS scroll-driven scroll-snapping animations

マウスをスクロールすることでコンテンツをアニメーション付きで切り替えるテクニック。 用意された4種類のアニメーションから選択できます。

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

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