ポップアップ

指定した要素をタップ（クリック）すると、ポップアップウィンドウが表示される仕組みを実装できる関数。

HTMLのマークアップ

    <div id="sample" class="sl-puw_scale">
        //ここにポップアプ内のコンテンツを記述する
        <label class="sample--close">CLOSE</label>
    </div>
    <label class="sample--open">OPEN</label>

    <script>
        sl_inv('sl-puw_scale') ;
    </script>
</body>

指定要素（モーションをかけたいタグ）のclassに、使いたいデフォルト関数の（）内の文字列を記述して、開閉用の<label>タグを設定しよう！

上記の例では、デフォルト関数「スケールアップしながら出現」を実装するために、指定要素のclassに「sl-puw_scale」を記述しています。

  • idはページ内で重複がなければどんな名前でも指定可能。
  • ポップアップの開閉ボタン（<label>）には、「id--open」「id--close」というclassを記述する。
  • ポップアップの開閉ボタン（<label>）は、ページ内のどこにでも複数設置することが可能。
//準備中

{}の中に設定を記述して、モーションを細かく制御しよう！

  • 設定項目を記述する順番に決まりはありません。

専用関数 sl_puw()

デフォルト関数

たった１行のJSコードで実装完了！
すぐに使える！

  • パッと出現

    Class

    sl-puw_flash

    JS code

    sl_puw('sl-puw_flash');
  • フェードイン

    Class

    sl-puw_fade

    JS code

    sl_puw('sl-puw_fade');
  • 下から上に向かって
    フェードイン

    Class

    sl-puw_up

    JS code

    sl_puw('sl-puw_up');
  • 上から下に向かって
    フェードイン

    Class

    sl-puw_down

    JS code

    sl_puw('sl-puw_down');
  • 右から左に向かって
    フェードイン

    Class

    sl-puw_left

    JS code

    sl_puw('sl-puw_left');
  • 左から右に向かって
    フェードイン

    Class

    sl-puw_right

    JS code

    sl_puw('sl-puw_right');
  • スケールアップしながら出現

    Class

    sl-puw_scale

    JS code

    sl_puw('sl-puw_scale');
  • バウンスしながら出現

    Class

    sl-puw_bownce

    JS code

    sl_puw('sl-puw_bownce');

カスタマイズ関数

簡単な追加設定で、
表現の幅がもっと広がる！

//準備中

ポップアップ：sl_puw()
カスタマイズ可能な設定

設定項目 機能 設定可能な値 デフォルト値 補足・ヒント
addclass指定要素が画面に入ったタイミングで付与されるclass名を任意の値にするclass名（文字列）**--aft通常は、sl_inv()の（）内で指定しているclass名の末尾に「--aft」を加えたclassが追記されますが、そのclassを任意のものに設定することが可能です。
addpointclassを追記（=モーションを発動）する位置を任意の値にする0 〜 500（単位：px）100表示エリア（画面）の下を0pxとし、画面下から
durationモーションの稼働時間を任意の値にする0 〜 3（単位：s）0.4最大3秒の指定が可能ですが、UXの観点から必要以上に稼働時間を長くしないことを推奨します。
range指定要素の移動距離を任意の値にする0 〜 500（単位：px）40
easingモーションのイージングを任意の値にするCSSで設定可能な
easingの値		easeCSSのプロパティ「transition-timing-function」などで指定可能な値を設定することが可能です。
  • 変更が必要な設定項目のみ記述すればOK（不要な設定項目は項目ごと削除）
  • 設定項目を記述する順番に決まりはありません
  • 各設定項目の値が不適切な場合はデフォルト値が適用されます