インタラクションデザイン
Web サイトの中で動く UI のサンプル集です。ボタン、ヒーロー、ローディング、ページ遷移などの用途ごとに、GSAP や Three.js で実装した動きをデモとコードで紹介しています。サイトへの組み込みもご相談ください。
すべてのインタラクション（360件）
-
-
ホバーでカードが 3D に裏返って裏面が出る
-
メーター型のグラフの針が振れて行き過ぎ、値で止まる
-
読んでいるセクションに合わせて目次の現在地のマーカーが滑って移る
-
ダウンロードのアイコンの矢印が下りてトレイに収まり、完了のチェックになる
-
トーストの通知が次々と奥へ重なり、ホバーで縦に広がる
-
目のアイコンが閉じて斜線が引かれ、パスワードが見える
-
ボタンを押すと商品が弧を描いてカートに飛び込み、数字が増える
-
評価の星が順に灯って弾む
-
コマンドパレットが ⌘K で開き、打つたびに候補が絞られる
-
ローディング中のスケルトンのカードにきらめきが流れる
-
スライダーのハンドルを引くと値の吹き出しがついてくる
-
カーソルの反転色の円が大きな文字の上を動く
-
ナビゲーションのリンクをなぞると背景の丸が滑ってついてくる
-
スクロールでセクションの見出しと段落が行ごとに現れる
-
誤入力で入力欄が震え、エラー文が出る
-
リンクやボタンの上でカーソルの輪が膨らむ
-
ページ遷移で縦長のパネルが順に閉じて開くと次のページになっている
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。