インタラクションデザイン
Web サイトの中で動く UI のサンプル集です。ボタン、ヒーロー、ローディング、ページ遷移などの用途ごとに、GSAP や Three.js で実装した動きをデモとコードで紹介しています。サイトへの組み込みもご相談ください。
すべてのインタラクション（360件）
-
-
ヒーローの背景で夕焼けの中をワイヤーフレームの山並みが手前へ流れる
-
立体の棒グラフが順に伸び、カメラが斜め上から回る
-
スクロールで画像が左からクリップで開いて現れる
-
スクロールでセクションのリストの行が、罫線を引きながら左から順に滑り込む
-
作品カードのホバーした画像が液体のようにゆがむ
-
ヒーローの立体の背景の上に見出しとボタンが順に現れる
-
ローディング中に光の粒が輪になって回る
-
ヒーローの背景で、銀色の金属の球体がノイズで形を変え続ける
-
スクロールでカードの画像がブラインドのように横のストライプで順に開く
-
ヒーローの背景でカメラが白い列柱の回廊を進み続ける
-
ページ遷移でタイルが順に裏返って次のページになる
-
ヒーローの背景の暗がりで、発光する色がにじみ合いながら漂う
-
ヒーローの背景でつやのある液体の玉がくっついて離れる
-
ヒーローの背景の暗がりに光の粒が立ちのぼる
-
ヒーローの背景でポインタが通ったタイルが浮き上がる
-
ホバーでボタンの矢印が右へ抜け、左から新しい矢印が入る
-
ホバーでボタンの枠線がぐるりと描かれる
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。