何気なくページをスクロールしていて、急に画面全体の色合いがふわっと変わると、強いインパクトを伝えることが出来ます。今回は特定の要素まで画面をスクロールしたら背景色を変更させる演出の事例をご紹介します。
このまま画面をスクロールすると、この演出を確認できます。
特定の要素まで画面をスクロールしたら画面全体の背景色を変更させる演出
背景が無地の状態
まずは通常の状態です。
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
背景が赤色に変わります
この要素が表示されると背景が赤色に変わりました。併せて文字色も白色に変更しています。
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
背景が青色に変わります
この要素が表示されると背景が青色に変わりました。
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
背景が無地の状態に戻ります。
この要素が表示されると背景が無地の状態に戻りました。文字色も元々の黒色に戻しています。
いかがでしたでしょうか。例として複数回の背景色切り替えを行いましたが、ここは見てほしいという訴求ポイントの要素の範囲だけこの演出を入れてあげることで、訴求効果が高まるかと思います。
このように特定の要素まで画面をスクロールしたら背景色を変更させる演出をご要望でしたら、お気軽にお問い合わせ下さい。
