Template Party

ScrollMeの導入方法

公式サイト
http://scrollme.nckprsn.com(デモサイト)
https://github.com/nckprsn/scrollme(ダウンロードサイト)

  1. ダウンロードボタンがあるのでクリック。
    ※以下画像をクリックすると、海外のDLサイトに移動します。
  2. Download Zip」を選んでファイルをDLします。
  3. DLファイルから「jquery.scrollme.js」を抜き出して、お手元のテンプレートのjsフォルダに移動します。
    その他のファイルは今回は使わないので削除してもらって構いません。
  4. お手元のテンプレートの<head>〜</head>内に以下タグを4行追加して下さい。
    <!--[if (gte IE 10)|!(IE)]><!-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="js/jquery.scrollme.js"></script>
    <!--<![endif]-->


    2行目のファイルの直接読み込みの行ですが、公式サイトに合わせておけばひとまずいいと思います。今回は2018/04時点での公式サイトのものと揃えました。

    SSL通信でならいならhttp://の読み込みで問題ありませんが、SSL通信の場合にhttps://にしておかないと動かないのでhttps://で記載しておいて下さい。

    IE10以上がScrollMeのサポート範囲です。それ以下だと表示に不具合が出る場合があるので、条件分岐(1行目と4行目)してIE10以上とモダンブラウザにのみ適用されるようにしました。

  5. 以上です。