luxy.js

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

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

これ本名でOK???

本家リンク:本家デモ

解説サイト:解説1

解説サイト:解説デモ

設置
    
//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

属性でパララックス操作
//水平パララックス指定可ーーー1文字ずつ指定めんどくさーーーーー!!!
//テ  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やブラウザによってフォントが変わります。このようにスマホ・パソコンに依存した文字になります。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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