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

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>
    
  2. 保存して画面を閉じます。

・●●●は上段、▲▲▲には下段のコンテナIDが入ります。
・下段のコンテナは背景画像Aを右寄せにするため、left:auto!important; right:0; を記述しています。

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

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

ページトップ