インタラクションデザイン
Web サイトの中で動く UI のサンプル集です。ボタン、ヒーロー、ローディング、ページ遷移などの用途ごとに、GSAP や Three.js で実装した動きをデモとコードで紹介しています。サイトへの組み込みもご相談ください。
すべてのインタラクション（360件）
-
-
スクロールでセクションの見出しが左右から寄って一文になる
-
ヒーローの背景でスタジオ照明に照らされた黒い金属の立体が回り、ドラッグでも回せる
-
スクロールでヒーローの画像の列が違う速さで流れる
-
ページ遷移で画面が奥へ遠のき、次のページが手前から来て収まる
-
ヒーローの背景で点でできた球がうねりながら回る
-
カーソルの軌跡が絵の具のようににじんで広がる
-
ヒーローの背景で細胞のような模様がゆっくりうごめく
-
ヒーローの背景で暗い床のドット行列がうねって波打つ
-
スクロールで画像が縮んだ状態から広がって現れる
-
ヒーローの背景で地形図のような等高線がオフホワイトの紙の上でうごめく
-
ヒーローの背景で液体金属のような反射がうねる
-
ヒーローの背景で星が光の尾を引き、ワープするように手前へ流れる
-
スクロールでカードが重なりながら積み上がる
-
スクロールでヒーローの画像が下のカードのグリッドへ移って並ぶ（FLIP）
-
スクロールの速さに合わせてカードの画像が傾く
-
スクロールでヒーローの全画面の画像が縮み、画面の中央のカードに収まる
-
スクロールでヒーローのカメラが 3D の道を進む
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。