2022年にCodepenで話題!コピペ可なHTMLスニペット ベスト100発表

2022年にCodepenで話題!コピペ可なHTMLスニペット ベスト100発表

世界でもっとも話題となった作品がこちら

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

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

CSSのみで表現されたお手軽なHTMLスニペットから、オドロキのユーザー体験を提供したり、CSSアニメーションなどにも注目が集まっています。

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

 

2022年にCodepenで話題!コピペ可なHTMLスニペット ベスト100発表

94位 Click To Zoom Calendar

クリックするとズームするカレンダーは、レスポンシブ対応のレイアウト。

See the Pen
Click To Zoom Calendar
by Hyperplexed (@Hyperplexed)
on CodePen.

 

93位 Animated Border Gradient

色が変化するグラデーションのボーダー線を表現したCSSアニメーション

See the Pen
Animated Border Gradient
by Shaw (@shshaw)
on CodePen.

 

86位 Animated Border Gradient

CSSのみでスタイリングされた、アイコン付きのタブバーメニュー。

See the Pen
Iconic Tab Bar – Pure CSS
by Josetxu (@josetxu)
on CodePen.

 

81位 Invert text on scroll with CSS variable

CSS変数を活用した、スクロールに応じて文字色が反転するテクニック。

See the Pen
Invert text on scroll with CSS variable
by Craig Roblewsky (@PointC)
on CodePen.

 

78位 Paper craft SVG Animation

ペーパークラフトのような仕上がりをリアルに表現したSVGアニメーション。

See the Pen
Paper craft SVG animation
by Uchiyama@株式会社フォスター (@fostor_uchiyama)
on CodePen.

 

72位 Blurred animated gradients

アニメーションで絶えず変化する、ぼかしグラデーションのCSSテクニック。

See the Pen
Blurred animated gradients
by Wil van der Tuin (@Jeromche)
on CodePen.

 

68位 Rotating links/buttons with text placed on a circular path

円形パスに沿って文字テキストを表示するリンク用CSSエフェクト。

See the Pen
Rotating links/buttons with text placed on a circular path
by Natalia 🤟 (@natszafraniec)
on CodePen.

 

64位 Scrolling rainbow – GSAP ScrollTrigger & ScrollSmoother

GSAPの慣性スクロールライブラリScroll Smotherの具体的な活用例。

See the Pen
Scrolling rainbow – GSAP ScrollTrigger & ScrollSmoother
by Fabio Ottaviani (@supah)
on CodePen.

 

61位 Sassy Search Bar 💁

心地よいマイクロインタラクションが魅力的な検索バー。

See the Pen
Sassy Search Bar 💁
by Hyperplexed (@Hyperplexed)
on CodePen.

 

59位 Radial Nav Menu

クリックで円形に展開するナビゲーションメニュー。

See the Pen
Radial Nav Menu
by Hyperplexed (@Hyperplexed)
on CodePen.

 

56位 CSS Blossoming Flowers at Magical Night

CSSのみでスタイリングされた、暗闇のなかでゆらゆらと揺れる花。

See the Pen
CSS Blossoming Flowers at Magical Night
by Md Usman Ansari (@mdusmanansari)
on CodePen.

 

54位 Sliced Text Effect

同じテキスト要素を2つ重ねることで、立体的にスライスされたようなエフェクトに。

See the Pen
Sliced Text Effect
by Shireen Taj (@TajShireen)
on CodePen.

 

53位 AI Art Generator

手持ちの画像を、AIをつかって異なる名画風に仕上げ、完成した画像はダウンロードも可能です。

See the Pen
AI Art Generator
by Yannick Brandt (@Coderesting)
on CodePen.

 

50位 City Life – Day & Night – Pure CSS

右下にあるトグルをつかって、昼と夜の風景を切り替えることができる、CSSオンリー のスニペット。

See the Pen
City Life – Day & Night – Pure CSS
by Josetxu (@josetxu)
on CodePen.

 

48位 Gradient background with waves

絶えず変化するグラデーションの背景に、アニメーション付きの波型ウェーブをCSSで表現したレイアウト。

See the Pen
Gradient background with waves
by Bárbara Rodríguez (@baarbaracrr)
on CodePen.

 

46位 Sketch Button

マウスホバーすると、キラリと輝くCTAボタン。

See the Pen
Sketch Button
by Aaron Iker (@aaroniker)
on CodePen.

 

42位 Jello Stretchy Variable Font

テキストをドラッグすると、ゼリーのようにぷるるんと動くエフェクトで、Variableフォントを利用しています。

See the Pen
Jello Stretchy Variable Font
by Pete Barr (@petebarr)
on CodePen.

 

39位 Stroke Logo Animation

シンプルですが、印象的なストロークアニメーションによるロゴ展開。

See the Pen
Stroke Logo Animation
by Jon Kantner (@jkantner)
on CodePen.

 

37位 Magical Text Effect

テキストリンクをアニメーション付きグラデーションカラーにし、キラリとした星シェイプを追加します。

See the Pen
Magical Text Effect
by Hyperplexed (@Hyperplexed)
on CodePen.

 

31位 Codepen Challenge: Huge Headers/Mega Menus

右上にあるハンバーガーメニューをクリックすると、フルスクリーンで展開するメガメニュー向けスニペット。

See the Pen
Codepen Challenge: Huge Headers/Mega Menus
by Sicontis (@Sicontis)
on CodePen.

 

30位 Gallery Example

マウススクロールに合わせて、上下左右、縦横無尽に移動するギャラリー。

ブルッと震えるグリッチエフェクトも秀悦。

See the Pen
Gallery Example
by Toshiya Marukubo (@toshiya-marukubo)
on CodePen.

 

27位 Card Hover Effect

カード型レイアウトにホバーすると、控えめながら、押したくなるエフェクトを背景に追加。

See the Pen
Card hover effect
by Aaron Iker (@aaroniker)
on CodePen.

 

25位 CSS Glassmorphism Button Hover Effects | Glass Morphism

すりガラスのような半透明エフェクト、グラスモーフィズムをCSSで表現したボタンエフェクト集。

See the Pen
CSS Glassmorphism Button Hover Effects | Glass Morphism
by Katarzyna Marta Kuich (@katarzynamarta)
on CodePen.

 

20位 Responsive NFT Landing Page

NFTマーケットプレイスを想定した、レスポンシブデザイン対応のWebレイアウト。

See the Pen
Responsive NFT Landing Page
by Erkan Erdil (@erkanerdil016)
on CodePen.

 

13位 Liquid Transition Effect

See the Pen
Liquid Transition Effect
by Aysenur Turk (@TurkAysenur)
on CodePen.

 

11位 Forest Landing Page

CSSのみで表現可能な、パララックスエフェクトを実現した、コンテンツ向けスニペット。

See the Pen
Forest Landing Page
by Robert Gil Baptista (@robertgbaptista)
on CodePen.

 

9位 Pokemon Cards Holo effect v2

最新オンラインツールでも話題となっていた、キラキラのホログラフィック効果を、CSSオンリーで表現できるライブラリ。

各種キラキラが、ずらり揃います。

See the Pen
Pokemon Cards Holo effect v2
by Simon Goellner (@simeydotme)
on CodePen.

 

8位 Sidebar Interaction

ワンクリックでサイズ伸縮でき、スペースを確保できる垂直型ナビゲーションメニュー。

ダークモードの切り替えにも対応しています。

See the Pen
Sidebar Interaction
by Aybüke Ceylan (@aybukeceylan)
on CodePen.

 

5位 Infinite Scroll Animation

左右にスクロールする無限アニメーションは、CSSのみで表現できる便利なテクニック。

See the Pen
Infinite Scroll Animation
by Yoav Kadosh (@ykadosh)
on CodePen.

 

3位 Animated Continuous Sections with GSAP Observer

GSAP Observerをつかうことで、スクロール動作を自由に調整できる、無限につづくコンテンツスライダーのサンプル例。

See the Pen
Animated Continuous Sections with GSAP Observer
by GreenSock (@GreenSock)
on CodePen.

 

2位 CSS Marquee Logo Wall

上下または左右に流れる、マーキー風スクロールアニメーションをCSSで再現。

左上にあるボタンで、スクロール方向を切り替え可能です。

See the Pen
CSS Marquee Logo Wall
by Ryan Mulligan (@hexagoncircle)
on CodePen.

 

1位 App Menu With Lock Screen

映えある一位は、ロックスクリーン付きのアプリメニュー。パスワード入力でログインできます。

See the Pen
App Menu With Lock Screen
by Hyperplexed (@Hyperplexed)
on CodePen.

 

2021年、2020年の人気スニペットはこちら。

ものすごいスピードで、進化を続けるウェブの世界をのぞいてみませんか。

2021年にCodepenで話題!コピペ可なHTMLスニペット ベスト100発表

2020年にCodepenで話題!コピペ可なHTMLスニペット ベスト100発表