スクロールで変化する背景デザインの作り方

スクロールするとページの背景が変わるデザインはダイナミックな表現に最適です。BiNDのデザイン管理機能「Dress」を使って背景画像を固定する方法を使えば簡単です。いつもと違った雰囲気が出るので是非お試しください。

今回はBiNDを使って、PCサイトの背景画像に「fixed」を用いた表現をご紹介します。
何の事やら?な感じかもしれませんので、まずはサンプルサイトをご覧下さい。
各セクションのタイトル部分の背景画像にご注目。
ちなみにスマホ表示では仕様上表現出来ませんので悪しからず。

BiND blog|スクロールで変化する背景デザインの作り方

LiVE2ではパララックスがありましたが、背景画像の表現に一手間加えるとセンスがグッとアップするのでお試し下さい。

設定方法

早速設定してみましょう。
と云っても、今回の設定は実に簡単。

背景を固定したいブロックに通常通り背景を設定

BiND blog|スクロールで変化する背景デザインの作り方

先ずは通常通り、背景画像を固定したいブロックに設定します。
その際、ブロックいっぱいに画像が表示される様「ストレッチ」を選択します。

背景を固定したブロックにブロックDressを設定

BiND blog|スクロールで変化する背景デザインの作り方

仕組みとしては、ブロックに設定した背景画像に対してDressを用いて位置固定(fixed)を行う事で表現しています。
ブロックエディタの設定タブからブロックデザイン内にある「その他のDress」ボタンを押します。

BiND blog|スクロールで変化する背景デザインの作り方

するとDress一覧が開きますので、「新規作成」ボタンから新しいDressを作成します。
名前は判り易く「bg_fixed」と付けておきました。説明文は空白で構いません。

「サイト全体」に対して「fixed」を指定

BiND blog|スクロールで変化する背景デザインの作り方

Dressの編集画面が開いたら適用範囲「サイト全体」の中にある「背景固定」から「fixed」を選択します。

BiND blog|スクロールで変化する背景デザインの作り方

ちなみにスマホでこの設定を用いると背景画像自体が表示されなくなるので、デバイス切替でスマホ編集画面を開き、同じく「サイト全体」の中にある「背景固定」から「scroll」を選択します。
これで設定は完了です。
「保存」を押して「適用」を押して下さい。

BiND blog|スクロールで変化する背景デザインの作り方

設定したブロックの背景が固定になったと思います。
一度設定したDressテンプレートは使い回しが出来ますので、他のブロックで同様の表現がしたい場合は、ブロックDressとして先程作成した「bg_fixed」を選択すれば完了です。

続きを読む

関連記事