Rellax.js

本家リンク：Rellax.js 本家

軽量７kbitで、入れ子や重なり指定も、属性値で指定できる

属性値指定してない要素の動作が微妙なので、属性値の指定は必須かな

注意）水平移動は、属性値では指定できない！

設置

スマホでもかくつくことは無い！


js/rellax.min.js

//セレクターで指定できる
var rellax = new Rellax('.simpara', {
/*
  callback: function(positions) {
    console.log(positions);
  }
*/
});
属性値

data-rellax-speed	スピード ( -10 ~ 10 )	-2
data-rellax-zindex	重なり順	０
data-rellax-percentage	位置
//パララックス要素をウィンドウ中央で揃えたい場合、
data-rellax-percentage=”0.5″

//又はオプション
center: true,
simpleParallax.jsと同じCSSでOK
属性値でパーツごとに設定可能！！
画像をwidth100にするー>親＝比率ボックス、パララックス要素 position: absolute;
//html 比率ボックスを親にする。画像に直接、又は背景画像として設置
.simpara { position: absolute; bottom: 0; left: 0 ;width: 100%; height:100%; line-height: 0;
  background-size:100% auto;　background-position: bottom;
}
img.simpara {height:auto!important;}

//html:画像直
<div class="ar-219">
<div class="arbox">
<img src="/photo/bg/ls-2.jpg" alt="ls-2.jpg" class="simpara">
</div>
</div>

//html:背景画像
<div class="ar-219">
<div class="arbox">
<div class="simpara" style="background-image: url(/photo/bg/ls-1.jpg)"></div>
</div>
</div>

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。ダミーテキストです。文字の大きさや形、色をご確認ください。テキストはOSやブラウザによってフォントが変わります。このようにスマホ・パソコンに依存した文字になります。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。ダミーテキストです。文字の大きさや形、色をご確認ください。テキストはOSやブラウザによってフォントが変わります。このようにスマホ・パソコンに依存した文字になります。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。ダミーテキストです。文字の大きさや形、色をご確認ください。テキストはOSやブラウザによってフォントが変わります。このようにスマホ・パソコンに依存した文字になります。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。ダミーテキストです。文字の大きさや形、色をご確認ください。テキストはOSやブラウザによってフォントが変わります。このようにスマホ・パソコンに依存した文字になります。

ls-2.jpg
方向を指定　up - right - down - left - up left - up right - down left - left right
  
    var $pala2 = document.getElementsByClassName('simpara2');
    new simpleParallax($pala2,{
       orientation: 'right'
    });
ls-2.jpg
要素自体を動かす：比率ボックスは外して設置
    
      overflow: true,

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。ダミーテキストです。文字の大きさや形、色をご確認ください。テキストはOSやブラウザによってフォントが変わります。このようにスマホ・パソコンに依存した文字になります。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。ダミーテキストです。文字の大きさや形、色をご確認ください。テキストはOSやブラウザによってフォントが変わります。このようにスマホ・パソコンに依存した文字になります。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。ダミーテキストです。文字の大きさや形、色をご確認ください。テキストはOSやブラウザによってフォントが変わります。このようにスマホ・パソコンに依存した文字になります。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。ダミーテキストです。文字の大きさや形、色をご確認ください。テキストはOSやブラウザによってフォントが変わります。このようにスマホ・パソコンに依存した文字になります。

ls-2.jpg

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。ダミーテキストです。文字の大きさや形、色をご確認ください。テキストはOSやブラウザによってフォントが変わります。このようにスマホ・パソコンに依存した文字になります。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。ダミーテキストです。文字の大きさや形、色をご確認ください。テキストはOSやブラウザによってフォントが変わります。このようにスマホ・パソコンに依存した文字になります。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。ダミーテキストです。文字の大きさや形、色をご確認ください。テキストはOSやブラウザによってフォントが変わります。このようにスマホ・パソコンに依存した文字になります。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。ダミーテキストです。文字の大きさや形、色をご確認ください。テキストはOSやブラウザによってフォントが変わります。このようにスマホ・パソコンに依存した文字になります。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。ダミーテキストです。文字の大きさや形、色をご確認ください。テキストはOSやブラウザによってフォントが変わります。このようにスマホ・パソコンに依存した文字になります。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。ダミーテキストです。文字の大きさや形、色をご確認ください。テキストはOSやブラウザによってフォントが変わります。このようにスマホ・パソコンに依存した文字になります。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。ダミーテキストです。文字の大きさや形、色をご確認ください。テキストはOSやブラウザによってフォントが変わります。このようにスマホ・パソコンに依存した文字になります。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。ダミーテキストです。文字の大きさや形、色をご確認ください。テキストはOSやブラウザによってフォントが変わります。このようにスマホ・パソコンに依存した文字になります。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。ダミーテキストです。文字の大きさや形、色をご確認ください。テキストはOSやブラウザによってフォントが変わります。このようにスマホ・パソコンに依存した文字になります。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。ダミーテキストです。文字の大きさや形、色をご確認ください。テキストはOSやブラウザによってフォントが変わります。このようにスマホ・パソコンに依存した文字になります。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。ダミーテキストです。文字の大きさや形、色をご確認ください。テキストはOSやブラウザによってフォントが変わります。このようにスマホ・パソコンに依存した文字になります。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。ダミーテキストです。文字の大きさや形、色をご確認ください。テキストはOSやブラウザによってフォントが変わります。このようにスマホ・パソコンに依存した文字になります。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。ダミーテキストです。文字の大きさや形、色をご確認ください。テキストはOSやブラウザによってフォントが変わります。このようにスマホ・パソコンに依存した文字になります。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。ダミーテキストです。文字の大きさや形、色をご確認ください。テキストはOSやブラウザによってフォントが変わります。このようにスマホ・パソコンに依存した文字になります。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。ダミーテキストです。文字の大きさや形、色をご確認ください。テキストはOSやブラウザによってフォントが変わります。このようにスマホ・パソコンに依存した文字になります。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。ダミーテキストです。文字の大きさや形、色をご確認ください。テキストはOSやブラウザによってフォントが変わります。このようにスマホ・パソコンに依存した文字になります。

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。ダミーテキストです。文字の大きさや形、色をご確認ください。テキストはOSやブラウザによってフォントが変わります。このようにスマホ・パソコンに依存した文字になります。

ls-3.jpg