KUMONOSU|コピペで使えるCSS・JSのアニメーションデザイン
Friendly
Neighborhood
Cascading Style Sheets & Animations
モーションやレイアウトテクニック、グラデーション、インタラクティブなアニメーションなど
コピペするだけで使えるCSS / JSのコードを分かりやすく紹介します。
よく見られているCSS
最新のCSS



CSSだけで作る、文字の中の背景がズームして画面全体に広がるアニメーション



CSSだけで作る、TikTok100フォロワー記念の数字スライドアニメーション


CSSとJSで作る、マウスに反応して揺らぐ雲やオーロラのようなアニメーション


CSSだけで作る、ネオンの残像が上下に流れ続けるタイトルアニメーション


CSSとJSで作る、スクロールで画像が順番に切り替わるスライダー


CSSだけで作る、サムネをクリックすると大きな画像が切り替わるギャラリー


CSSとJSで作る、カーソルに追従する光の残像


CSSだけで作る、スクロールでグラデラインがスライドして文字が現れる見出し


CSSとJSで作る、視線がマウスを追いかけてクリックで瞬きする猫


CSSとJSで作る、クリックでつかんで振って合計が出る3Dサイコロ


CSSとJSで作る、ノイズと光のラインが脈動するボタン


CSSとJSで作る、ガラス・波紋エフェクトで切り替わるスライダー
FRIENDLY NEIGHBORHOOD FRIENDLY NEIGHBORHOOD FRIENDLY NEIG
With great power comes great responsibility With great pow


特集&まとめ


解説
CSSの@layerとは?優先順位が一瞬で分かるカスケードレイヤー完全解説【初心者向け】


特集
CSS・JavaScriptで実装できる光るUIのネオンまとめ


ナレッジ・ノウハウ
CSSを勉強するときにおすすめの本その1|これだけで基本がしっかり身につくHTML/CSS&Webデザイン
なぜKUMONOSU?
KUMONOSUは、
CSSやJavaScriptを使ったアニメーションやレイアウトデザインを、
実際に試してみたサイトです。
「どんな見た目・どんな動きになるのか」を実際に確認でき、
デモとコード付きのためコピペ可能です。
海外の最新トレンドやモダンなCSSを中心に、
Webデザイナーやフロントエンド制作者の初心者からベテランまで、
制作の中で使えそうな表現を厳選して掲載しています。
また、カテゴリやパーツごとに整理しているため、
アイデア探しやデザインの参考としても使いやすく、
CSS・JSを探したいときに便利なサイトです。
掲載している記事数は、KUMONOSUが扱う表現の幅を示す指標であり、
デザインの参考探しにも実装のヒント探しにも役立ちます。
KUMONOSUの本日のアクセス数は、リアルタイムの指標です。、
デザイナーやフロントエジニアの新しいテクニックへの関心度がわかります。
KUMONOSUの総アクセス数は、信頼性の指標です。、
これまでの全てのアクセス数は、デザイナーやフロントエンジニアから継続的に支持されている証拠にもなります。
