パララックス(視差)効果の手順【備忘録】

今回は、rellax.jsを使った手順書です。
なお、rellax.jsを使わなくても以下の手順は大事です。

手順

• 重ねる順番を考える
• HTMLを書く
• positionプロパティ + z-inexプロパティ + overflow：hiddenプロパティを使って構成

親となる大枠を決める。幅と高さを指定する

position: relative;を使って、位置を決める。これを忘れると、子要素にoverflow:hidden;が効かなくなるで注意。
テンプレートによっては、横幅の要素が小さい場合があるので、calcプロパティを使って、横幅を画面いっぱいに広げる
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
max-width: none; width: 100vw;<>

子要素の作成

背景の指定および、画面の真ん中に配置したいためdiv要素を入れ子にする。
rallax.jsを使用する場合、transform値が変更されてしまうため、子要素の中に子要素を作成する(classを別に指定しないとスクロールに合わせて画像位置が変更していまう)
真ん中の計算にtransformを利用する。
left:50%;
transform: translate(-50%);
-webkit-transform: translate(-50%);
z-indexの指定も忘れずに。

HTML php出力用

echo "  <div id=\"example\">
    <div class=\"out-side\"><div class=\"side rellax \" data-rellax-speed=\"4\"></div></div>
    <div class=\"out-slide\"><div class=\"slide rellax \" data-rellax-speed=\"1\"></div></div>
    <div class=\"out-slide-front\"><div class=\"slide-front\"></div></div>
  </div>"

CSS

#example {
  position: relative;
  overflow:hidden;
  width: 100%;
  height: 593px;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  max-width: none; width: 100vw;
}
.out-side {
  position: absolute;
    left:50%;
  transform: translate(-50%);
  -webkit-transform: translate(-50%);
  width: 1980px;
  height: 800px;
  z-index: -15;
}
.side {
  position: absolute;
  background: url(/画像) ;
  background-position:center;
  background-size:contain;
  background-repeat: repeat;
  width: 1980px;
  height: 800px;
}
.out-slide {
  position: absolute;
  width: 960px;
  height: 693px;
  left:50%;
  transform: translate(-50%);
  -webkit-transform: translate(-50%);
  z-index: -10;
}
.slide {
  background:url(/画像);
  width: 960px;
  height: 693px;
  background-position:center;
  z-index: -10;
}
.out-slide-front {
  position: absolute;
    width: 960px;
  height: 593px;
    left:50%;
  transform: translate(-50%);
  -webkit-transform: translate(-50%);
  z-index: -5;

}
.slide-front {
  position: absolute;
  background: url(/画像);
  width: 960px;
  height: 593px;
  z-index: -5;
  background-position:center;
}