インタラクションデザイン
Web サイトの中で動く UI のサンプル集です。ボタン、ヒーロー、ローディング、ページ遷移などの用途ごとに、GSAP や Three.js で実装した動きをデモとコードで紹介しています。サイトへの組み込みもご相談ください。
すべてのインタラクション（360件）
-
-
ページ遷移で次のページ名の巨大な文字が穴になって広がり、中から次のページが現れる
-
ページ遷移でカメラのシャッターの羽根が閉じて開くと次のページになる
-
横に並ぶ作品の上でカーソルが左右の矢印に変わり、押したまま引くと慣性でついてくる
-
入力フォームが 3 つのステップに分かれ、次へで横に滑って進む
-
散布図のグラフの点が中心から散って定位置に収まり、重ねると値が出る
-
ページ遷移で今のページが蛇腹に折り畳まれ、次のページが広がって現れる
-
カーソルとリンクの間にゴムの線が張られ、引き離すと切れて弾む
-
カーソルに近い文字が押しのけられて、まわりに丸い空き地ができる
-
ウォーターフォールのグラフの段が順に伸び、増減の積み上がりが見える
-
ヒーローの画像を押した所から波紋が広がり、次の画像に切り替わる
-
ヒーローの見出しの立体の文字がゆっくり傾き、表面を光が流れる
-
ヒーローの画像スライダーで、画像がノイズの形に焼け落ちて次の画像が現れる
-
スクロールでカードがぼかしからピントが合って現れる
-
ページ遷移で単色の面が画面を横切って次のページに切り替わる
-
ヒーローの背景で光沢のあるリボンがうねって流れる
-
ヒーローの背景で、フィルムグレインの乗った夕暮れのグラデーションがうねる
-
スクロールで円筒状に並んだカードが回る
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。