スライドは、パーツやインナーが横や下からすべり込むように現れるアニメーションです。左右に並んだ画像と文章を、それぞれ外側から中央に寄せるような見せ方もできます。
見え方
設定のしかた
- スライドを付けたいパーツ（またはインナー・コンテナ・セクション）を選びます。
- 右側のプロパティメニューで「アニメーション」タブを開き、「アニメーション」で「スライド」を選びます。
- 方向と距離、トリガーとタイミングを設定します。
- ツールバー右端の「▶」で動きを確認します。
スライドの設定項目
| 項目 | 内容 |
|---|---|
| 方向 | どちらからすべり込むか。上から下／左から右／下から上／右から左 から選びます。 |
| 距離 | どのくらい離れた位置から動き始めるか。初期値は 20px、最大 200px です。 |
トリガー・タイミングなど共通の設定については、アニメーションとはをご覧ください。
設定例
| やりたいこと | 設定 |
|---|---|
| 画像を横からすべり込ませる | 画像にスライド。方向：左から右、距離：200px |
| 左右の画像と文章を、外側から中央に寄せる | 左のインナーに「左から右」、右のインナーに「右から左」のスライド |
| スクロールに合わせて、画像を下から持ち上げる | 画像にスライド。方向：下から上、トリガー：スクロール、イージング：リニア、スクロール範囲：開始 0%・終了 100% |
動きが小さく感じるときは、距離を大きくする
距離の初期値（20px）では、動きが小さく、付けたことに気付きにくい場合があります。はっきり見せたいときは、距離を大きくしてください。
スクロールに合わせて動かすときのコツ
トリガーを「スクロール」にするときは、イージングを「リニア」、スクロール範囲の終了位置を 100% 付近にすると、画面を通り過ぎるあいだずっと動きが続きます。「イーズアウト」や終了位置が小さい設定では、画面に入ってすぐに動き終わり、気付きにくくなります。