インタラクションデザイン
Web サイトの中で動く UI のサンプル集です。ボタン、ヒーロー、ローディング、ページ遷移などの用途ごとに、GSAP や Three.js で実装した動きをデモとコードで紹介しています。サイトへの組み込みもご相談ください。
すべてのインタラクション（360件）
-
-
スクロールでヘッダーが縮み、背景が付いて影が落ちる
-
カーソルの周りの丸い範囲だけ隠れた画像が見える
-
紙飛行機のアイコンが飛び去り、反対側から戻る
-
タブの切り替えで棒グラフが新しい値へ伸び縮みし、目盛りと値が入れ替わる
-
ナビゲーションの検索アイコンを押すと、左へ伸びて入力欄に変わる
-
ボタンを長押しすると周りの輪が満ちて確定し、途中で離すと戻る
-
ナビゲーションのホバーでメガメニューが幅いっぱいに開き、列と特集カードが順に出る
-
ホバーでカードが浮き上がり、影が深くなる
-
音量のアイコンの波が順に出て、ミュートで × に変わる
-
クリックしたカードがその場から広がり、詳細画面になる
-
認証コードの入力欄に数字が 1 つずつせり上がり、そろうと緑に色づく
-
ナビゲーションのホバーでドロップダウンが降り、項目が上から順に落ちてくる
-
カーソルを速く動かすと円が進行方向に伸びる
-
カーソルの位置でカードに光が当たり、枠も照らされる
-
ハンバーガーを押すと円が広がって全画面メニューになり、リンクが順に出る
-
ファイルをドラッグするとアップロード欄の枠が光り、落とすと進捗が満ちる
-
ホバーでカードの画像が寄り、キャプションが下から上がる
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。