220_Gutenbergでスクロールした時に背景画像だけ固定させるには(パララックス)

カバー機能では文字を画像の上に載せたり、背景の透明度を調整することができます。今回は更にスタイリッシュに見せる「パララックス」と呼ばれる機能について説明をしていきます。


それでは手順を確認していきましょう。
まずは【投稿】の【新規追加】をクリックした後、タイトルを入れたら本文部分の横にある『カバーの追加』をクリックします。

クリックした後、画像をアップロードします。

アップロードが完了すると下記のような画面になるので『タイトルを入力…』をクリックしてテキストを入れていきます。
ここまでの手順は前回・前々回と同じになります。

右側に設定するブロックがあるので『カバー固定』にチェックを入れます。

どのように変わったか実際に画面を見てみましょう。

画像の表示場所は固定されていますが、スクロールをするたびに画像も動いているのがわかります。

いかがでしたか?
パララックスは使い方は難しいですが、上手に使うことでとても効果的に物事を伝えることができます。色々なアイデアを形にしやすくなってきているので臆せず試していくと良いでしょう。