ヒーロー
ページを開いて最初に目に入る、ファーストビューの演出です。見出しの文字がせり上がる動き、ポインタに合わせて奥行きが出る背景、Three.js（WebGL）で描く光やガラスの質感などを、デモとコードで紹介しています。
ヒーローのインタラクション（66件）
-
-
ヒーローの立体の背景の上に見出しとボタンが順に現れる
-
ヒーローの背景で、銀色の金属の球体がノイズで形を変え続ける
-
ヒーローの背景でカメラが白い列柱の回廊を進み続ける
-
ヒーローの背景の暗がりで、発光する色がにじみ合いながら漂う
-
ヒーローの背景でつやのある液体の玉がくっついて離れる
-
ヒーローの背景の暗がりに光の粒が立ちのぼる
-
ヒーローの背景でポインタが通ったタイルが浮き上がる
-
ヒーローの見出しでホバーした文字が持ち上がり、周りがなだらかに続く
-
ヒーローの背景でラベルの玉が落ちて弾み、積み重なる
-
見出しの筆記体の文字が書き順どおりに描かれる
-
ブロブが形と色を変えながら回る
-
見出しの文字の太さが波のように変わる
-
見出しをタイプライター風に打ち出し、カーソルが点滅する
-
見出しの字間が詰まりながら現れる
-
見出しが色ずれしながら乱れる（グリッチ）
-
ヒーローの背景の暗い部屋に光の筋が斜めに差し込み、塵が舞う
-
見出しの語の下に手描きの下線が引かれて消える
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。