インタラクションデザイン
Web サイトの中で動く UI のサンプル集です。ボタン、ヒーロー、ローディング、ページ遷移などの用途ごとに、GSAP や Three.js で実装した動きをデモとコードで紹介しています。サイトへの組み込みもご相談ください。
すべてのインタラクション（360件）
-
-
スクロールでカードが下からふわっと順に現れる
-
ホバーでボタンの背景が下から満ちる
-
下へ読み進めるとヘッダーが隠れ、少し戻すと出る
-
ホバーでボタンの文字が上へ抜け、下から同じ文字が入る
-
ホバーでボタンに液体がうねりながら満ちる
-
ポインタに合わせてヒーローの山並みの層がずれ、奥行きが出る
-
カーソルを少し遅れて追いかける輪
-
スクロールでセクションの図が固定され、段階ごとに切り替わる
-
カーソルが作品の画像の上で「詳しく見る」の丸いラベルに変わる
-
トーストの通知が右上から滑り込み、タイマーが尽きると消える
-
入力欄にフォーカスするとラベルが縮んで上に移り、下線が伸びる
-
画像の境目のハンドルを引いて前後を見比べる
-
ボタンがカーソルに吸い寄せられる
-
ヒーローの背景で浮かぶ水の雫が、奥の模様を逆さに映して屈折させる
-
ローディング中に 3 つの点が順に跳ねる
-
背景が暗くなり、モーダルが弾みながら拡大して開く
-
スクロールでセクションの大きな文字が左から塗られていく
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。