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

今回は、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出力用

CSS

この記事を書いた人

山崎 大祐

現役コーダーでフロントエンジン寄りのWeb構築と運用ができます。(企画/デザイン/構築/運営)
すきなもの「赤色・キューブ・コンクリート」