ヒーロー
ページを開いて最初に目に入る、ファーストビューの演出です。見出しの文字がせり上がる動き、ポインタに合わせて奥行きが出る背景、Three.js（WebGL）で描く光やガラスの質感などを、デモとコードで紹介しています。
ヒーローのインタラクション（66件）
-
-
グラデーションの光の筋が見出しの文字を横切る
-
ヒーローの背景で網点の大きさが波のように膨らんでは引く
-
バッジの円周に沿った文字がゆっくり回る
-
見出しの同じ単語が縦に重なり、波のようにずれる
-
ヒーローの背景でノイズの流れに沿って無数の光の線が流れる
-
文字化けしながら単語が切り替わる
-
ヒーローの背景でぼかした色の塊が漂うオーロラ
-
散らばった粒が集まってヒーローの見出しの文字になる
-
反転フラップ（パタパタ）で見出しの文字が切り替わる
-
ヒーローの背景で色の移る波線がずれながらうねる
-
ヒーローの背景で四分円のタイルが順に回って模様が組み変わる
-
輪郭だけの見出しの文字が下から塗りつぶされる
-
見出しの中の単語が縦に回転して切り替わる
-
ヒーローの背景で地平線から透視グリッドが流れてくる
-
散らばった文字が集まって見出しになる
-
見出しの文字がぼかしから順に現れる
-
ヒーローの巨大な見出しが、斜めに傾いた行になって横に流れ続ける
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。