インタラクションデザイン
Web サイトの中で動く UI のサンプル集です。ボタン、ヒーロー、ローディング、ページ遷移などの用途ごとに、GSAP や Three.js で実装した動きをデモとコードで紹介しています。サイトへの組み込みもご相談ください。
すべてのインタラクション（360件）
-
-
コピーのアイコンを押すとチェックに変わって戻る
-
ホバーで文中のリンクの下線が左から伸び、離れると右へ抜ける
-
ヒーローの背景でラベルの玉が落ちて弾み、積み重なる
-
ホバーでボタンを光が斜めに横切る
-
スクロールで記事の読了バーが伸び、読んだ割合を % で示す
-
カードの上で重なったアバターがホバーで広がる
-
ボタンを押すとつぶれて弾む
-
ステッパーが進むたびに丸が塗られ、線が次のステップへ伸びる
-
ページ送りの今の点がカプセルになり、次の点まで伸びてから縮んで移る
-
ボタンの枠のグラデーションが回り続け、ホバーで光が強まる
-
ホバーで丸いボタンが伸び、文字が現れる
-
重なったカードを横にはじいて次へ送る
-
カーソルの軌跡に点が残って消える
-
口コミのカードが自動で順に切り替わり、ドットが残り時間を示して進む
-
登録ボタンを押すと紙吹雪が弾け、ひらひらと舞い落ちる
-
横に並んだ縦長のカードがホバーで広がり、文字が遅れて出る
-
ボタンでサイドバーの幅が縮み、アイコンだけになって本文が広がる
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。