mobile-detect.jsの利用方法、記載の仕方がわかりません

Question

前提・実現したいこと

外部ライブラリーmobile-detect.jsを利用してモバイルではparallaxを使用しないサイトを作成したいのですが、記載方法が分からず質問をさせて頂いています。

発生している問題・エラーメッセージ

どう記述をしたらモバイルとpcでparallax効果をオンオフに分けることが出来るのか分かりません。

該当のソースコード

var isMobile = !!(new MobileDetect(window.navigator.userAgent).mobile());

// 場合分けしたい箇所で以下のように使う
if (isMobile) {
    // モバイルブラウザの場合（この中の書き方がわかりません）
} else {
    // モバイルブラウザ以外の場合（この中の書き方がわかりません）
}

jsのソース　main.js

var speed = 3;

var slideHeight;

function showParallax() {
    var scrollTop = $(window).scrollTop();

    $(".parallax-section-1").css({
        "background-position": "center " + Math.round((0 - scrollTop) / speed) + "px",
    });
    $(".parallax-section-2").css({
         "background-position": "center " + Math.round((slideHeight - scrollTop) / speed) + "px",
    });
    $(".parallax-section-3").css({
         "background-position": "center " + Math.round((slideHeight * 2 - scrollTop) / speed) + "px",
    });
    $(".parallax-section-4").css({
         "background-position": "center " + Math.round((slideHeight * 3 - scrollTop) / speed) + "px",
    });
}

function initParallax() {

    slideHeight = $(window).height();
    showParallax();
}

$(document).ready(function() {
    initParallax();

    $(window).scroll(showParallax);
});

$(window).resize(function() {

    initParallax();
});

試したこと

様々なサイトで調べてみたのですがよくわかりませんでした

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[sho_jonas]

mobile-detect.jsを使って何をやりたいかがいまいちわかりません。何をしたいかを明確にして質問したほうが回答が集まると思います。

[退会済みユーザー]

ご回答ありがとうございます！了解致しました！

[unz.hori]

mobile-detect.jsはモバイル(スマホ/タブレット)またはPCからのアクセスを判定するものだと思いますが、それを判定して何をやりたいのかによると思います。

[退会済みユーザー]

ご返信ありがとうございます。parallaxサイトはモバイルでは重い動作なのでモバイルではparallaxをオフにするような記述にしたいのですが、どのようにするかわからなくて困っています

Answer 1

どのparallaxかわかりませんが、大差ないかと

<script src="https://cdn.jsdelivr.net/npm/mobile-detect@1.4.1/mobile-detect.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.11.0/dist/jquery.min.js"></script>
<script>
var isMobile = !!(new MobileDetect(window.navigator.userAgent).mobile());
if (!isMobile) {
    // モバイルブラウザ以外の場合
    $.getScript('https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js', function(script, textStatus, jqXHR) {
        $('[data-parallax="scroll"]').parallax();
    });
}
</script>

Comments

[退会済みユーザー]

ご回答ありがとうございます！モバイルブラウザには何も指定せずモバイルブラウザ以外でparallaxを指定しているという事でしょうか

読み込むjsファイルにはparallaxの記載をしてもよいのでしょうか？無知ですみません

[unz.hori]

x_xさんの回答例はモバイルかどうか判定して、モバイルでなければparallax.min.jsを読み込んでいる例です。

[退会済みユーザー]

ご返信ありがとうございます。ためになりました！質問に返信をしてくださった方ありがとうございます！！ちなみにCDNをを利用しない場合で自作コードのファイルを読み込む時はどうしたらよいのでしょうか？

[x_x]

unz.horiさんの解説通りで、モバイルに対してはスクリプト自体読み込んでいません。モバイルでオフではなく、モバイル以外でオンです。
どのようにparallaxを実現しているのかわかりませんが、どのライブラリを使っているのか教えてもらえれば具体的な記述もわかるかもしれません。

[退会済みユーザー]

x_xさんご返信ありがとうございます　そのような記述の仕方があるのですね！ためになりました！！
jsファイルにparallaxのコードを自分で書いたものをmobile-detect.jsを使い、
モバイルブラウザではparallaxの機能をoffにしたいのですが基礎的な記述の仕方がわかっていませんでした。今回質問をした事でイメージは掴めました！！