カーソル
マウスの動きに合わせて形や表示を変える、カーソルの演出です。少し遅れて追いかける輪や、作品の画像の上で「詳しく見る」のラベルに変わるカーソルを、デモとコードで紹介しています。
カーソルのインタラクション（25件）
-
-
カーソルの横の小さな札が、乗っている物に合わせて文言と幅を替える
-
見出しの横のキャラクターの目がカーソルを追い、近づくとまばたきする
-
カーソルが通った本文の語に淡いマーカーが引かれ、少しずつ消えていく
-
カーソルの丸が、乗った丸いボタン・カード・リンクの行と同じ形に変わって重なる
-
色の抜けた写真をカーソルでなぞると、なぞった所から色が戻っていく
-
横に並ぶ作品の上でカーソルが左右の矢印に変わり、押したまま引くと慣性でついてくる
-
カーソルとリンクの間にゴムの線が張られ、引き離すと切れて弾む
-
カーソルに近い文字が押しのけられて、まわりに丸い空き地ができる
-
カーソルの軌跡が絵の具のようににじんで広がる
-
カーソルの周りの丸い範囲だけ隠れた画像が見える
-
カーソルを速く動かすと円が進行方向に伸びる
-
カーソルの軌跡に点が残って消える
-
矢印のカーソルが進む向きに回り、止まると元の向きに戻る
-
商品の画像の上で、カーソルの周りが虫めがねのように拡大される
-
クリックした所から小さな図形が弾けて散る
-
背景のドットが、カーソルに近いものほど大きく明るくなる
-
十字の線が画面いっぱいに伸びてカーソルを追い、座標の数字がついてくる
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。