インタラクションデザイン
Web サイトの中で動く UI のサンプル集です。ボタン、ヒーロー、ローディング、ページ遷移などの用途ごとに、GSAP や Three.js で実装した動きをデモとコードで紹介しています。サイトへの組み込みもご相談ください。
すべてのインタラクション（360件）
-
-
リンクにホバーすると、行き先のプレビューのカードが少し遅れて浮かぶ
-
ページの上端からお知らせのバーが降りてきて、閉じると畳まれてページが詰まる
-
円グラフの扇にホバーすると外へ浮き出し、中央の値が替わる
-
入力欄に打った語がタグのチップになって並び、× で消える
-
背景のドットが、カーソルに近いものほど大きく明るくなる
-
ブックマークのアイコンを押すと下から満ちて保存され、リボンが揺れる
-
フォローのボタンを押すと、幅を変えながらフォロー中に変わる
-
＋ のアイコンが回って － に変わり、アコーディオンの開閉を示す
-
機能紹介のセクションでタブが自動で進み、進捗の線が満ちると次の図に切り替わる
-
十字の線が画面いっぱいに伸びてカーソルを追い、座標の数字がついてくる
-
封筒のアイコンのふたが開き、中の手紙がのぞく
-
ダウンロードボタンを押すと進捗のバーになり、満ちると完了に変わる
-
スクロールの向きに合わせて、セクションを横に流れる大きな文字が向きを変え、速さも増す
-
セクションの取引先ロゴの壁が、1 枚ずつ縦にめくれて入れ替わり続ける
-
Dock のナビゲーションで、カーソルに近いアイコンほど大きくなる
-
ナビゲーションのメニューを移ると、ドロップダウンの背景が大きさを変えながら滑って移る
-
ページ遷移でページ名の大きな文字を流す横長のバーが画面を覆い、次のページへ切り替わる
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。