Wix Studio エディタ:ヘッダースクロールエフェクトを追加する
読了時間:3分
トランジションエフェクトを追加して、スクロール時のヘッダーの表示方法を変更します。訪問者がページをスクロールダウンする際に、ヘッダーをフェードアウトまたは移動させます。塗りつぶし色と不透明度を変更して、目立つようにすることもできますが、気が散らないようにしてください。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2020/08/17/b2505aff-f2ff-42e9-a15f-a8ca7653dcd9/a83f3342-7582-4472-9414-9640a9d08edd.gif)
この記事では、以下の項目について説明します:
スクロールに切り替えと塗りつぶし色を追加する
訪問者がページをスクロールダウンする際に、目を引くトランジションを作成し、ヘッダーの背景色を変更します。
ヒント:
トランジションエフェクト(例:移動とフェード)はすべてのブレイクポイントに適用されます。ただし、ブレイクポイントごとに異なる塗りつぶし色を設定できます。
スクロールに切り替えと塗りつぶし色を追加する方法:
- エディタでヘッダーを選択します。
- エディタ右上の「要素設定パネルを開く」矢印アイコン
をクリックします。
- 「スクロール効果」までスクロールダウンします。
- ヘッダーに追加するトランジションエフェクトを選択します:
![要素設定パネル内で「スクロール効果」を設定しています](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/09/15/74d4e281-9216-43f8-8fc1-bbcb7209bff5/69c5e9e9-b8b5-4070-b9e0-19e534041323.jpg)
スクロールでヘッダーを移動させる
ヘッダーをフェードアウトさせる
ヘッダーの塗りつぶし色を変更する
注意:
トランジションエフェクトと一緒に塗りつぶし色を設定することはできますが、同じエフェクトで「フェード」と「移動」を組み合わせることはできません。
スクロール効果を削除する
ヘッダーに追加したスクロール効果はいつでも削除できます。
スクロール効果を削除する方法:
- エディタでヘッダーを選択します。
- エディタ右上の「要素設定パネルを開く」矢印アイコン
をクリックします。
- 「スクロール効果」までスクロールダウンします。
- 「切り替え」、「塗りつぶし色」、またはその両方の横にあるトグルを無効にします。