ヒーロー
ページを開いて最初に目に入る、ファーストビューの演出です。見出しの文字がせり上がる動き、ポインタに合わせて奥行きが出る背景、Three.js（WebGL）で描く光やガラスの質感などを、デモとコードで紹介しています。
ヒーローのインタラクション（66件）
-
-
ヒーローの背景でドットグリッドに中心から波紋が広がる
-
ヒーローの背景で同心円のリングと点が別々の速さで回る
-
見出しの文字が波のように上下する
-
ヒーローの背景で丸・三角・四角が浮かんでゆっくり回る
-
抽象ロゴの列が 2 段で逆向きに途切れず流れ続ける
-
ヒーローの巨大な文字の穴から景色が見え、スクロールで画面いっぱいに抜ける
-
ヒーローの背景でネオン管の図形が発光してまたたく
-
ヒーローの背景でグラデーションが溶け合いながら流れる
-
見出しを 1 文字ずつせり上げる
-
ポインタに合わせてヒーローの山並みの層がずれ、奥行きが出る
-
ヒーローの背景で浮かぶ水の雫が、奥の模様を逆さに映して屈折させる
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。