背景を使いこなす
次の動画(1分53秒)を見ながら、実際にWebreakを操作し、
- 各ボックスの背景を設定する方法
- レイヤーの設定方法
- 背景を固定にした場合の、デザインの見た目の変化
の3つの動作を確認してください。
背景の仕組み
各ボックスごとに、背景を設定でき、各ボックスの背景は、4つの層(レイヤ)でできています。
- 下地レイヤー
- 特殊効果レイヤー
- 特殊効果レイヤー
- 特殊効果レイヤー
下地レイヤーは設定が必須で、特殊効果レイヤーは任意に設定できます。 また、背景を固定させることで、視差効果(パララックス)を実装することもできます。
1. 各ボックスの背景を設定する方法
各ボックスの左にある背景設定ボタンをクリックすると、指定したボックスの背景を変更するための画面が表示されます。
2. レイヤーの設定方法
下地を決める
背景のベースとなる下地を指定します。
ここで、背景全面写真やグラデーションを選択できます。
特殊効果を決める
様々な特殊効果を背景で表現できます。
- アスファルト
- 斜線
- 木目
3. 背景を固定にした場合の、デザインの見た目の変化
背景固定をONにすると、背景画像がマウスのスクロールに連動せずに画面に固定されて表示されるようになります。 これを視差効果(パララックス)と呼びます。 オシャレなサイト演出のため、よく使われる技術です。
下地を写真に設定し、背景固定をONにしたボックスを2つならべると、同じ背景を異なるボックスで共有することができます。 この背景設定を使いこなしてくると、オシャレなホームページが作れるようになってきます。
その他、開発情報など
ここでご紹介した「背景設定」機能は、サービスの提供を開始したのが2016年11月です。 特に、特殊効果レイヤーでご利用いただけるパターンが、まだまだ少ないため、ご不便をおかけしております。 デザイナーが新しいパターンを制作しており、随時アップデートしてまいりますので、お楽しみに!