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="数字"