ぼかしでは、訪問者のスクロールに応じて、要素を透明からぼやけた状態に徐々に変化させることができます。例えば、背景画像を表示させ、スクロールに合わせて溶解させることができます。
詳細設定またはスタイル > 背景
モーションエフェクト
- スクロール効果：スライドしてオンにします
- ぼかし：鉛筆編集アイコンをクリック
方向：4 つのエフェクトの方向から 1 つを選択します。
フェードイン – レベルとビューポートの設定に基づいて、要素がぼやけた状態で始まり、徐々にクリアになります。
フェードアウト – レベルとビューポートの設定に基づいて、要素はクリアな状態で始まり、徐々にぼやけていきます。
フェードアウトイン – レベルとビューポートの設定に基づいて、要素がクリアな状態で始まり、フェードアウトしてぼやけた状態になり、再びクリアな状態になります。
フェードインアウト – レベルとビューポートの設定に基づいて、要素がぼやけた状態で始まり、クリアになり、その後再びぼやけた状態になります。
レベル（Level）：ピークブラーのレベルを0～10の間で設定します。
ビューポート：ビューポートの高さ（デバイス画面の表示サイズ）に基づいて、エフェクトを開始するタイミングを決定します。たとえば、ビューポート値が50～100の間に設定されている場合、ビューポートの高さの半分をスクロールした後にのみ効果が開始されます。 - エフェクトを適用する：デスクトップ、タブレット、モバイルデバイスにモーションエフェクトを適用するかどうかを選択します。
- 相対的な効果：デフォルト、ビューポート、ページ全体から選択
ヒント：以下のシナリオを試してみてください。方向をフェードインアウトに設定します。 ビューポートを 30-60 の間に設定して、何が起こるかを確認してください：見出しはピントが合って始まり、30% でぼかしレベルのピークに達し、60% まで同じままで、画面の最後までフェードアウトします。