PARALLAXパララックス

パララックス導入前に

jsフォルダに[rellax.js]を入れ、下記のコードをhtml上(<script>)に追記する。

var rellax = new Rellax('.js-rellax', {
  center: true,//ページをスクロールして、その要素の部分までスクロールが達したら、要素が動き始める
});

横、縦、画面いっぱいの
パララックス

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

view more

横、縦、画面いっぱいの
パララックス

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

view more

横、縦、画面いっぱいの
パララックス

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

view more

パララックスの設定

  • data-rellax-zindexで前後の位置を決める。zindexは数字が大きい方が上。
  • data-rellax-speedでスピードを決める。スピードは-10から10の間で値を設定、-の方が速く動く。

下記をパララックスさせたい要素に追記する。

data-rellax-speed="数字" data-rellax-zindex="数字"
パララックス1
パララックス2
パララックス3
パララックス4
パララックス5
パララックス6