luxy.js

超軽量4kbit::慣性スクロールがついているのが特徴 -> 慣性スクロールするスマホには向かない??

属性値指定で、横方向もOK、重なりは？ CSS指定で可能

これ本名でOK???

本家リンク：本家デモ

解説サイト：解説１

解説サイト：解説デモ

設置

    
//pollyfill版を使う
    <script src="/js/luxy.js.polyfills.min.js"></script>

//実行
luxy.init({
    wrapper: '#luxy',//wrapper要素
    targets : '.luxy-el',//パララックス要素
    wrapperSpeed:  0.08//スピード
});
//オプションはデフォルト値を使う場合は、省略

比率ボックスに設置/パラ要素の高さを大きめに設定しておく height:120%;

コントロールが難しい間を開けて複数設置する場合にズレが出る。

//data-offsetがプラス値だと上があく！
//要素が動いてしまう。
//背景のみパララックスは？
#sec0 .luxy-el { position: absolute; top: 0; left: 0;
min-width: 100%;
height:160%;
line-height: 0;
background-position: top;
background-size: cover;
}
//data-speed-y　はマイナス値で、上方向
data-speed-y="-10"

//背景のみパララックス下方向
#sec2 .luxy-el { position: absolute; bottom: 0; left: 0; min-width: 100%; height:160%; line-height: 0;
background-position: bottom;
background-size: cover;
}
//data-speed-y　はプラス値で、下方向
data-speed-y="10"

wrapper要素：：position:fixedで固定させる仕様

フッターやヘッダーが固定式でなければ、wrapper要素に含めとかないと崩れる。

//idで囲う 2つ以上は設置できない？
//wrapper id=luxy は、body直後に
    <div id="luxy">
    ここにコンテンツを入れる
    </div>
//headerを固定するので、mainーfooter をwrap。
//idはオプションで設定すればなんでもいい。自動でスタイルがつく
width: 100%;　//固定
position: fixed; //固定
transform: translate3d(0px, 0px, 0px);//変動

パーツ親要素

//targetsの親要素CSS
position: relative; width: 100%; overflow: hidden;

パララックス要素CSS

//targetsの親要素
//targets（パララックス）要素（重ねる場合は,z-indexで前後調整）
position: absolute; width: 100%; height: 100%;
z-index: 1;
//上下位置は適宜設定する
top: 0;
left :0;

//targets（パララックス）要素内の画像ファイルを背景として使う場合、targets要素を重ねること
//パララックス要素の入子OK

属性でパララックス操作

//水平パララックス指定可ーーー１文字ずつ指定めんどくさーーーーー！！！
//テ　 data-horizontal="1" data-speed-x="-5”
//ス　 data-horizontal="1" data-speed-x="0"
//ト　 data-horizontal="1" data-speed-x="5"

//移動方向  マイナス = 上移動、プラス = 下移動
//移動速度 値が大きい方が早い
data-speed-y="-10"

//開始位置調整  プラス値で下に下がる
data-offset="200"

スマホは使わない方が無難？

//分岐
if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0) {
    // スマートフォン向けの記述
} else if (navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('Android') > 0) {
    // タブレット向けの記述
} else {
    // PC向けの記述
    luxy.init();
}

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

画像は背景指定（↓）・img使用（↑）の両方いける！（PC版モダンブラザ）

背景指定で、IE・スマホで動作するか？

動作したとしてカクつかないか？