質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.19%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,322
退会済みユーザー

退会済みユーザー

 前提・実現したいこと

外部ライブラリー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/ツールのバージョンなど)

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • sho_jonas

    2018/02/13 14:12

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

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2018/02/13 14:14

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

    キャンセル

  • unz.hori

    2018/02/13 15:13

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

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2018/02/14 11:41

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

    キャンセル

回答 1

checkベストアンサー

0

どの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>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/02/15 11:26

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

    キャンセル

  • 2018/02/15 11:27

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

    キャンセル

  • 2018/02/17 13:01

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.19%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる