KUMONOSU|コピペで使えるCSS・JSのアニメーションデザイン
Friendly
Neighborhood
Cascading Style Sheets & Animations
モーションやレイアウトテクニック、グラデーション、インタラクティブなアニメーションなど
コピペするだけで使えるCSS / JSのコードを分かりやすく紹介します。
よく見られているCSS
CSSだけで作る、光り方がかっこいいネオンの効果
最新のCSS
Three.jsとGSAPで作る、画像を使ったスライドパズル
Three.jsとGLSLで作る、斜めに流れる多段パララックス画像ギャラリー
Three.jsで作る、入力テキストが3Dメタル文字に変わるジェネレーター
Three.jsで作る、スクロールで画像がタイル状に回転する3Dセクション演出
Three.jsとGLSLで作る、画像が立体的に動く3Dレリーフエフェクト
Three.jsとGLSLで作る、母の日に贈るクリックで花が咲くアニメーション
CSSとThree.jsで作る、らせん状に回転する3Dスパイラルギャラリー
【プロンプト有】CSSとJSで作る、スクロール連動の没入型メディアヒーローUI
【プロンプト有】CSSとJSで作る、AIで生成した横スクロールの画像スライダー
【プロンプト有】CSSとJSで作る、マウスに追従する画像プレビューリスト
【プロンプト有】AIがCSSとJSで作るメインが浮き上がる奥行き演出のスライダー
CSSとJSだけで作る、3Dフリップがめくれるスクロールアニメーション
FRIENDLY NEIGHBORHOOD FRIENDLY NEIGHBORHOOD FRIENDLY NEIG
With great power comes great responsibility With great pow
CCSをパーツから探す
パーツ検索では、ボタン、カード、ナビゲーション、メインビジュアルなど、実際に使うUIパーツごとにCSS/JSのデモを探せます。
特集&まとめ
お知らせ
コード一覧で動きがわかりやすくなりました|動画サムネイル対応&プレビュー改善
特集
GSAPで実現する高品質アニメーションまとめ|JavaScript表現・UI演出集
特集
Three.jsで魅せるCSS・JavaScriptまとめ|3D演出・インタラクション事例集
なぜKUMONOSU?
KUMONOSUは、
CSSやJavaScriptを使ったアニメーションやレイアウトデザインを、
実際に試してみたサイトです。
「どんな見た目・どんな動きになるのか」を実際に確認でき、
デモとコード付きのためコピペ可能です。
海外の最新トレンドやモダンなCSSを中心に、
Webデザイナーやフロントエンド制作者の初心者からベテランまで、
制作の中で使えそうな表現を厳選して掲載しています。
また、カテゴリやパーツごとに整理しているため、
アイデア探しやデザインの参考としても使いやすく、
CSS・JSを探したいときに便利なサイトです。
掲載している記事数は、KUMONOSUが扱う表現の幅を示す指標であり、
デザインの参考探しにも実装のヒント探しにも役立ちます。
KUMONOSUの本日のアクセス数は、リアルタイムの指標です。、
デザイナーやフロントエジニアの新しいテクニックへの関心度がわかります。
KUMONOSUの総アクセス数は、信頼性の指標です。、
これまでの全てのアクセス数は、デザイナーやフロントエンジニアから継続的に支持されている証拠にもなります。