スクロールエフェクトを設定する（Scroll Effect）

スクロールエフェクトを設定する

パララックスやスクロール連動などのスクロールエフェクトは、条件付きスタイルのスクロール（Scroll Effect）を使用して設定します。

スクロールプレビューモードでは画面が次のように変化し、スクロールしながら設定したエフェクトの動きを確認できます。

スクロールエフェクトは、エフェクトのトリガー方式をタイムラインとして選択します。条件に応じて、[ビュー]タイムラインと[スクロール]タイムラインを使い分けます。

タイムライン	説明	使い分け
ビュー	要素が画面に入ってから出るまでの区間に連動します。	個別の要素に演出を変化させたい場合に使用します。
スクロール	直近の親のスクロール位置（0〜100%）に連動します。	ページの進行度に応じて変化させたい場合に使用します。

キーフレームとは、スクロールに合わせて「どこで・どう変化するか」を記録するための節目のポイントです。

スクロールエフェクトでは、このキーフレームごとに見た目（位置や不透明度など）を設定し、その間を自動でつないで要素を変化させます。

基本的には「0%（変化が始まるとき）」と「100%（変化が終わるとき）」の 2 つのキーフレームを設定します

キーフレーム間の [+] ボタンから中間キーフレームを追加できます。中間キーフレームを追加すると、途中で変化する複雑なエフェクト表現も作成できます。

ビュータイムラインを使うときは、「画面のどのタイミングで 0〜100% の変化を進めるか」をトリガーで指定します。

トリガーアイコンをクリックするとポップオーバーが開き、トリガーの種類やパーセンテージを細かく調整できます。

例えば「入る時 50%」に設定すると、要素が半分画面に入った時点から変化を開始できます。

各種トリガーは以下の通りです。

トリガー	説明	活用例
入る時 (entry)	要素が画面に入り始める区間を基準にします。	画面の端からスッと入ってくる間に変化を開始するときに使います。
出る時 (exit)	要素が画面から出始める区間を基準にします。	画面外に消えていくときに変化を開始したい場合に使います。
内包される時 (contain)	要素が完全に画面内にある区間を基準にします。	画面中央付近にいる間だけ、ゆっくり動かしたいときに使います。
入る時から出る時 (cover)	要素が入り始めてから出終わるまでの区間全体に対応させます。	入ってくるところから、画面外に出るところまで、一つの長い変化を設定した場合に使います。

各キーフレームに付随する[スタイル追加]ボタンから、各キーフレームごとにスタイルを設定できます。

移動と不透明度など複数のスタイルを組み合わせることで、フェードしながらスライドインするなどの表現が可能です。

設定可能なスタイルは以下の通りです。