コンテナにパララックスを設定する方法：応用編

bingo!CMS1.7の機能を使用してコンテナにパララックス効果を設定します。
今回ご紹介するのは応用編です。ほんの一手間でWebページに変化を加えることができます。
※パララックスとは、複数の要素（画像やテキストなど）を異なるスピードで動かす事で得られる視差効果です。


まずは、デモページの動画（無音です）をご覧ください。

画面を下にスクロールすると、背景画像は固定されたまま、
テキストなどのコンテンツだけが移動していきます。
その箇所がパララックスの設定を応用した部分です。
背景を固定することで、印象付けたい画像を表示しつつ、
コンテンツも同時に見せることができるので、
様々なWebページに応用することができます。

パララックスの設定手順

※1　「bingo!CMS 1.7」をご利用の方のみ設定できます。
※2　スキンはV17のものをご使用ください。

  1. ページ経集画面からコンテナモードに切り替え、マルチコンテナをドラッグ＆ドロップします。
    今回は2段分配置しました。
  1. 上段のマルチコンテナのコンテナ編集画面に入り、レイアウト設定を行います。 今回はコンテナ幅を40%、右寄せ、上揃えにしました。
  1. タブをコンテナ設定に切り替えて、背景画像Aにパララックスで固定表示したい画像を設定します。
  2. パララックスを"する"、スクロールスピードを"0px"に設定し保存します。
  • 手順4の設定により、パララックスの背景が固定されます。
  • 下段のコンテナは左寄せにして、それ以外は同じように設定します。

コンテナにCSS/JSを設定する

  1.  CSS/JS設定画面にスタイルを追加します。
    ページ編集画面右上の"CSS/JS"をクリックします。
  1. 以下をcss欄に記述します。 
    	<style type="text/css">
	#container●●●-bg {
	  width: 60%!important;
	}
	#container●●●-bg > div {
	  background-size: cover;
	}
	#container▲▲▲-bg {
	  width: 60%!important;
	left:auto!important;
	right:0;
	}
	#container▲▲▲-bg > div {
	  background-size: cover;
	}
	</style>
    ●●●は上段、▲▲▲には下段のコンテナIDが入ります。
    コンテナIDとは、コンテナ編集画面左上に表示されている #container-outer-xxx の、xxx部分の番号です。
  2. 保存して画面を閉じます。

コンテナにユニットを配置する

  1. パララックスを設定したコンテナの中に、任意でユニットを配置しコンテンツを作成します。
  2.  ページが完成したら、画面を下にスクロールしてみましょう。
    背景画像Aが固定され、コンテンツだけが動けば完成です。
・コンテナの背景画像Bを設定するとユニットに背景をつけることができます。
・今回はwidth100%に対し、背景画像A幅60%：コンテナ幅40%で表示されるように設定しました。
・100%を超える数値で指定した場合は背景画像Aの上にコンテナが重なって表示されます。

ページトップ