ヒーロー
ページを開いて最初に目に入る、ファーストビューの演出です。見出しの文字がせり上がる動き、ポインタに合わせて奥行きが出る背景、Three.js（WebGL）で描く光やガラスの質感などを、デモとコードで紹介しています。
ヒーローのインタラクション（63件）
-
-
ヒーローの見出しの立体の文字がゆっくり傾き、表面を光が流れる
-
ヒーローの画像スライダーで、画像がノイズの形に焼け落ちて次の画像が現れる
-
ヒーローの背景で光沢のあるリボンがうねって流れる
-
ヒーローの背景で、フィルムグレインの乗った夕暮れのグラデーションがうねる
-
ヒーローの背景でスタジオ照明に照らされた黒い金属の立体が回り、ドラッグでも回せる
-
スクロールでヒーローの画像の列が違う速さで流れる
-
ヒーローの背景で点でできた球がうねりながら回る
-
ヒーローの背景で細胞のような模様がゆっくりうごめく
-
ヒーローの背景で暗い床のドット行列がうねって波打つ
-
ヒーローの背景で地形図のような等高線がオフホワイトの紙の上でうごめく
-
ヒーローの背景で液体金属のような反射がうねる
-
ヒーローの背景で星が光の尾を引き、ワープするように手前へ流れる
-
スクロールでヒーローの全画面の画像が縮み、画面の中央のカードに収まる
-
スクロールでヒーローのカメラが 3D の道を進む
-
ヒーローの背景で夕焼けの中をワイヤーフレームの山並みが手前へ流れる
-
ヒーローの立体の背景の上に見出しとボタンが順に現れる
-
ヒーローの背景で、銀色の金属の球体がノイズで形を変え続ける
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。