無料ホームページテンプレート Template Party無料ホームページテンプレート Template Party

ScrollMeの使い方

海外のチームが開発しているファイルにつき、動作保証や不具合のサポートは当サイトでは一切行っておりません。予めご了承下さい。

公式サイト

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

ScrollMeのダウンロード

  1. ダウンロードボタンがあるのでクリック。
    ※以下画像をクリックすると、海外のDLサイトに移動します。
  2. Download Zip」を選んでファイルをDLします。

テンプレートへ移動し、使う為の設定をします。

  1. DLファイルから「jquery.scrollme.js」を抜き出して、お手元のテンプレートのjsフォルダに移動します。
    その他のファイルは今回は使わないので削除してもらって構いません。
  2. お手元のテンプレートのhtml側の<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以上とモダンブラウザにのみ適用されるようにしました。