i.
Scroll Motion
スクロールで、見せる。
スクロールに合わせて、文字や画像が順番に現れる。読みながら、ページが動き続ける構成にします。
- 文字単位フェード
- クリップパス・カーテン
- 視差（パララックス）スクロール
№ 00 — 動きのあるWebデザイン
Webサイトに、 動きを。
スクロールで文字が現れる、ホバーでボタンが反応する、背景で WebGL が動く。Webサイトに動きをつけて表現するスタジオです。
[ scroll ]
§ 01
動きの、 目次。
Webサイトに動きをつけると、伝えたいことが届きやすくなる。スクロール、ホバー、ロード ── ページの中で起きる動きを、内容に合わせて使い分けます。
- 01. スクロールで、文字を出す
- スクロールに合わせて、文字や画像が順番に現れる。読み手のペースで、情報を一つずつ見せていく。
- 02. 1文字ずつ、出す
- タイトルや見出しを、1文字ずつタイミングをずらして表示する。文字が立ち上がる動きそのものが、見どころになる。
- 03. 触ると、反応する
- ボタンに下線が伸びる、画像にカーソルを乗せると拡大する、リンクの色が変わる。要素ごとに、触ったときの反応をつける。
§ 02 — Capabilities
つけられる動き、 4つの種類。
ii.
Hover & Cursor
触れたら、応える。
カーソルを乗せると、ボタンが沈む、文字に下線が伸びる、画像が少し動く。要素ごとに、触ったときの反応を細かくつけます。
- ホバー・マイクロモーション
- カスタムカーソル
- ボタンの状態遷移
iii.
WebGL / Canvas
奥行きを、つくる。
three.js や GLSL を使った背景。波、光、粒子の動きを、ページが重くならない範囲で組み込みます。
- WebGLヒーロー
- シェーダー背景
- 3Dパララックス
iv.
Smooth Scroll
滑らかに、流す。
仮想スクロールを使って、ページのスクロールをなめらかにする。セクションが切り替わるときも、ぎこちなさを出しません。
- 仮想スムーススクロール
- セクション間のリズム設計
- ページ遷移演出
§ 03 — Selected Work
近年の、 仕事から。
動きをつけたことで伝わり方が変わった、5つのWebサイト。コーポレート、出版、レーベル、季刊誌、地域財団。
§ 04 — Begin