注目インタラクションデザイン
Web サイトの中で動く UI のサンプル集です。ボタン、ヒーロー、ローディング、ページ遷移などの用途ごとに、GSAP や Three.js で実装した動きをデモとコードで紹介しています。サイトへの組み込みもご相談ください。
すべてのインタラクション（360件）
-
注目
-
注目スクロールでロードマップのセクションに道が描かれ、マーカーが線に沿って進む
-
注目鍵のアイコンのつるが上がって開き、また閉じる
-
注目スマホのタブバーで、押したタブへ丸が滑って移り、アイコンが丸の中へ持ち上がる
-
注目パスワードの入力に合わせて強度メーターが伸び、色が変わる
-
注目ヒーローの見出しでホバーした文字が持ち上がり、周りがなだらかに続く
-
注目丸いボタンを押すと、スピードダイヤルのアクションが扇状に飛び出す
-
注目散らばった粒が集まってヒーローの見出しの文字になる
-
注目グラフの数字が桁ごとに縦に回って変わる
-
注目ローディング中に砂が落ちきると砂時計が返る
-
注目使い方ツアーで、画面を暗くするオーバーレイに開いた穴が部品から部品へ形を変えて移り、吹き出しが付いていく
-
注目ページ遷移でカーテンが降り、中央にロゴが描かれてからカーテンが上がって次のページになる
-
注目スライドボタンのハンドルを右端まで引くと確定し、途中で離すと弾んで戻る
-
注目作品名のリストをなぞると、カーソルの位置に作品の画像が出てついてくる
-
注目スクロールでセクションの年表の線が伸び、項目が順に現れる
-
注目ローディングの数字が 100 に達すると画面が上下に割れて開く
-
地球儀をドラッグで回し、ピンに合わせると拠点名が表示される
-
本文を読み終えると、ページが上へ抜けて後ろのフッターが現れる
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。