インタラクションデザイン
Web サイトの中で動く UI のサンプル集です。ボタン、ヒーロー、ローディング、ページ遷移などの用途ごとに、GSAP や Three.js で実装した動きをデモとコードで紹介しています。サイトへの組み込みもご相談ください。
すべてのインタラクション（360件）
-
-
ヒーローの背景で色の移る波線がずれながらうねる
-
ヒーローの背景で四分円のタイルが順に回って模様が組み変わる
-
画像が重なりながら順に切り替わるギャラリー
-
輪郭だけの見出しの文字が下から塗りつぶされる
-
見出しの中の単語が縦に回転して切り替わる
-
ヒーローの背景で地平線から透視グリッドが流れてくる
-
ローディング中に縦棒が波打つ
-
散らばった文字が集まって見出しになる
-
見出しの文字がぼかしから順に現れる
-
ヒーローの巨大な見出しが、斜めに傾いた行になって横に流れ続ける
-
見出しの文字が 3D で順に裏返る
-
ヒーローの背景でドットグリッドに中心から波紋が広がる
-
ローディング中に丸・三角・四角と形を変え続ける
-
ヒーローの背景で同心円のリングと点が別々の速さで回る
-
ローディングの「LOADING」の文字に光が走る
-
見出しの文字が波のように上下する
-
ローディングの終わりに、円とチェックを線で描いて完了を伝える
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。