HTMLなどのコードを、ブラウザ上で確認ができ、公開や共有もできる開発サービスCodepen(コードペン)。
この記事では、2024年に特に人気の高かったHTMLスニペットをランキング形式でまとめた The Most Hearted of 2024 の中から、印象に残った素敵な作品をご紹介。
2024年に話題となったWebサイトでも見かける、参考にしたくなる魅力的なエフェクトやテクニックに多くのハートが集まっています。
HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。
97位 gsap ScrollTrigger Image Zoom
スクロールに合わせてSVGの茂みの影から画像がズームするGSAPのScrollTriggerエフェクト。
See the Pen gsap ScrollTrigger Image Zoom by misala (@p0waqqatsi) on CodePen.
96位 Squishy
実際にボタンを押したような質感をCSSのみで表現したボタンホバーエフェクト。
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のみで描かれたとは思えない灯台は、回転する光が印象的で日中と夜間の切り替えも可能。
See the Pen Day/Night Lighthouse Illustration – CSS by Josetxu (@josetxu) on CodePen.
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
マウスを動かす速度によって丸みが立体的に変化するカスタムカーソル。
See the Pen Elastic Custom Cursor Following Mouse (Squeeze and Rotate) w/ JavaScript by Denis Gusev (@gusevdigital) on CodePen.
グリッド状に並べられた画像が左右にスクロールしながらボタンのクリックを促す、訴求力の高いヒーローイメージ。CSS Gridを活用したスニペット。
See the Pen intro grid section by misala (@p0waqqatsi) on CodePen.
CSSのみでできているとは思えないほど遠近感たっぷりな404エラーページ向けスニペット。
See the Pen 404 Error Room – CSS by Josetxu (@josetxu) on CodePen.
スクロールすることで黄色の潜水艦が深海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アニメーションが印象的。
See the Pen Pure CSS header animation to sticky nav by Amit (@ghaste) on CodePen.
上下にスライドしながらフォーカス項目が変更されるラジオボタン向け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.
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
マウスホバーすると、アイコン付きでサークル状に回りだすユニークなナビゲーションメニュー。
See the Pen CSS only navigation with rotating text hover effect by Chris Bolson (@cbolson) on CodePen.
iPhone 16 Proのランディングページで使われていた輝くテキストエフェクトを完全再現したスニペット。
See the Pen Text Illumination by Rafa (@RAFA3L) on CodePen.
1行の@keyframesで表現できる魅力的なアニメーション9種類を揃えたミニライブラリ。
See the Pen Single Keyframe Tricks by David East (@davideast) on CodePen.
13位 Responsive Dashboard with Sliders and Music Player
画像スライダーと音楽プレイヤーが搭載されたレスポンシブなダッシュボード画面。
See the Pen Responsive Dashboard with Sliders and Music Player by Ecem Gokdogan (@ecemgo) on CodePen.
古いデスクトップ型パソコン画面の中に照明が当たる空間が広がるジオラマのような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.
アルファベットで入力すると手描きした署名サイン風に仕上げてくれるアニメーション。
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.
マウスカーソルを合わせた要素に沿って波型アニメーションが印象的な3Dホバーエフェクト。
See the Pen 3D wave animation by Thea (@HighFlyer) on CodePen.
コンテンツがぼんやりフェードアウトしながら出現する没入感たっぷりなフッター用アニメーション。
See the Pen Fancy Fading Footer by Juxtopposed (@Juxtopposed) on CodePen.
4位 Interactive Gradient & Glassmorphism with noise
色が絶えず変化するグラデーション背景に、ざらっとしたノイズ間のあるグラスエフェクトを再現。
See the Pen Interactive Gradient & Glassmorphism with noise by TOMAZKI (@Podgro) on CodePen.
3位 Cards with inverted border-radius #scss
カードの隅をえぐるように反転させるborder-radiusをつかったデザインの小技テクニック。
See the Pen Cards with inverted border-radius #scss by Kristen (@kristen17) on CodePen.
マウスカーソルを下に移動すると丸い小窓から外の美しい風景へとズームするエフェクトは、GSAPをつかったテクニックのひとつ。
See the Pen ScrollTrigger Image Zoom by GSAP (@GreenSock) on CodePen.
1位 CSS scroll-driven scroll-snapping animations
マウスをスクロールすることでコンテンツをアニメーション付きで切り替えるテクニック。 用意された4種類のアニメーションから選択できます。
See the Pen CSS scroll-driven scroll-snapping animations by Giana (@giana) on CodePen.
今回は掲載しきれなかった他のスニペットは、Top Pens of 2023 on CodePenより確認できます。
直近4年間のトップ100も良かったらいかがでしょう。どれだけのスピードでWebが進化しているか、よく分かる実例のひとつ。