スクロールに合わせて、文字や画像をふわっと表示したり、少しずつ動かしたりできる機能が「Scroll Effect」です。

条件付きスタイルの「出現時」は、要素が表示されたタイミングでアニメーションを実行する機能ですが、Scroll Effectはスクロール位置に合わせて動きを変化させられます。

たとえば、以下のような動きが作れます。

・下からスッと文字が出てくる
・スクロールに合わせて画像がゆっくり動く
・画面に入ったタイミングでフェードインする
・背景だけ少し遅れて動くパララックス表現を作る

Studioだけで設定できるため、コードを書かなくても直感的に動きを付けられます。

※注意：Scroll Effectは現在、公開サイト新基盤（beta）には未対応です。

Scroll Effectでできること

Scroll Effectを使うと、スクロールに合わせて自然な動きを付けられます。

動きがあるだけで、サイト全体が見やすくなり、読者の目線も誘導しやすくなります。特に、見出しや画像、ボタンなどに軽く動きを付けるだけでも、サイトの印象は大きく変わります。

Scroll Effectでは、主に以下の3つを設定できます。

スクロールアニメーションを設定する手順

ここからは、実際にScroll Effectを設定する流れをご紹介します。

基本は「タイミングを決める」「動きを決める」の2つだけです。ひとつずつ設定していけば大丈夫です。

1. スクロールプレビューモードに切り替える

まずは、スクロールアニメーションを設定するための専用モードに切り替えます。

このモードにすることで、実際にスクロールしながら、どのように動くのか確認できるようになります。

①まず、アニメーションを付けたいボックス要素を選択します。

②次に、右パネルの「ボックス」タブ（赤四角）を開きます。

③上部にある「条件付きスタイル」から「スクロール」を選ぶと、スクロールプレビューモードに切り替わります。

スクロールプレビューモードになると、以下の状態になります。

• 実際にスクロールしながら確認できる

• 画面上部に解除用バナー（赤四角）が表示される

• 右パネルがスクロール用設定画面に変わる

• 設定中の要素が左側のレイヤーパネル上で緑色で表示される

2. タイムラインを選ぶ

次に、どのタイミングでアニメーションを動かすかを決めます。

Scroll Effectでは、ビューまたは、スクロールを選べます（赤四角）。

ビューは、要素が画面に入ってから出るまでの動きに連動します。見出しや画像など、個別の要素にアニメーションを付けたい場合に向いています。

スクロールは、親要素のスクロール位置に連動します。ページ全体の進行に合わせて動きを付けたい場合に向いています。

3. キーフレームを設定する

タイムラインを選んだら、次はキーフレーム（赤四角）を設定します。

キーフレームとは、「ここでこう変化する」というポイントを決める機能です。最初と最後の状態を設定するだけでも、自然なアニメーションが作れます。

キーフレームとは、「どこで、どんな状態にするか」を決めるポイントです。

基本は以下の2つを設定します。

• 0％：アニメーション開始時

• 100％：アニメーション終了時

途中でさらに変化を付けたい場合は、「＋」ボタン（赤四角）から中間キーフレームを追加できます。

4. ビュータイムラインのトリガーを設定する

「ビュー」を選んだ場合は、どの位置でアニメーションを始めるかも設定できます。

同じフェードインでも、少し早めに表示するか、画面中央に来たタイミングで表示するかで、印象はかなり変わります。

「ビュー」を選んだ場合は、画面のどの位置でアニメーションを始めるか設定できます。

トリガーアイコン（赤四角）をクリックすると、開始位置を細かく調整できます。

5. スタイルを追加する

ここでは、実際にどのような動きにするかを設定します。

Scroll Effectでは、移動や透明度だけでなく、回転やぼかしなども組み合わせられます。まずはシンプルな動きから試してみるのがおすすめです。

キーフレームごとに「スタイル追加」（赤四角）を押すと、どんな動きにするか設定できます。

移動や不透明度など、複数のスタイルを組み合わせることで、フェードしながらスライドインするなどの自然なアニメーションを設定できます。

6. プレビューで確認する

設定が終わったら、必ず実際にスクロールして動きを確認しましょう。

数値を少し変えるだけでも、動きの印象は大きく変わります。違和感がある場合は、移動量や透明度を少しずつ調整してみてください。

スクロールすると、右パネルに現在の進行度（赤四角）が表示されます。

思った通りに動いているか確認しながら、数値を少しずつ調整しましょう。

Scroll Effectを解除する方法

アニメーションの設定が終わったら、通常の編集画面に戻します。

作業途中で一度解除して、全体の見え方を確認するのもおすすめです。

設定を終えたら、以下のどちらかで終了できます。

• 右上の戻るアイコン（赤四角）を押す

• 上部バナーの「スクロールプレビューモードを解除」を押す

不要な設定を削除する方法

削除したい場合は、スタイルだけ消したり、中間キーフレームのみを選んで削除できます。

スタイルを削除する

不要なスタイルは、スタイル名の横にある矢印のアイコン（赤四角）、「上書きを削除」から削除できます。

中間キーフレームを削除する

途中で追加したキーフレームは、ゴミ箱アイコンから削除できます。

Scroll Effectを動画で学ぶ

Scroll Effectの動きや設定方法を動画で確認したい場合は、Studio公式動画も参考にしてみてください。

実際の操作画面を見ながら学べるため、動きのイメージをつかみやすくなります。

https://www.youtube.com/watch?v=FO7Ccx3p89Y&t=76s

まとめ

Scroll Effectを使うと、スクロールに合わせて自然なアニメーションを付けられます。

難しそうに見えますが、最初は「ビュー」「移動」「不透明度」の3つだけ覚えれば十分です。

まずは、文字や画像をふわっと表示する簡単な動きから試してみてください。少し動きを付けるだけでも、ページ全体が見やすく、おしゃれな印象になります。