スクロールに連動して画像がゆっくりスライドする表現（パララックス）を設定する

この記事では、バナー領域の中で画像が上方向にスライドする表現（パララックス）を作成する方法を解説します。

クリップ用ボックスと条件付きスタイルのスクロールの設定を組み合わせて設定します。

まず、パララックスの「窓」となるボックスを配置します。 このボックスが画像の表示領域になります。

「はみ出し：[非表示]」がパララックス表現の要です。 ボックスからはみ出した画像部分が隠れることで、スクロール時に画像が「窓から覗く」ような見え方になります。

以下の画像では、わかりやすいようにボックスの背景色を青色に変更しています。

次に、クリップ用ボックスの中にパララックスさせる画像ボックスを配置します。

条件付きスタイルのスクロールでスクロールエフェクトを設定します。

スクロールの開始地点と終了地点で、画像の位置を設定します。 ここでは、スクロールに合わせて画像が上方向にスライドするように設定します。

この設定により、スクロールに連動して画像が Y: 0px から Y: -600px へと徐々に移動し、 画像がゆっくり上方向にスライドすることでパララックス効果が生まれます。

Y の絶対値を大きくするほどスライド量が増え、動きが強調されます。

設定が完了したら、以下いずれかの方法で通常の編集モードに戻します。

最後に、実際の動きを確認します。

バナーの枠内で自然に画像が動いて見えれば、設定は完了です。

パララックスの強さは、100% 地点の Y 値で調整できます。

デザインに合わせて値を変え、過度な移動で画像の端が見えすぎないように調整します。

クリップ用ボックスの高さを変更する場合は、画像のスライド量（Y 値）も合わせて調整します。 高さに対してスライド量が大きすぎると、スクロールの途中で画像がボックス外まで移動し、余白が見えてしまうことがあります。

横方向にパララックスさせたい場合は、移動の Y ではなく X の値を設定します。

0% 地点と 100% 地点で X の値を変えることで、左右方向にスライドするパララックス表現が作れます。