Waypointsの使い方

CODE
のり
のり

画面をスクロールして一定位置まで来た時にアクションをつけたいけれどどうしたらいいんだろう?

こういった疑問に答えます。

今回は、Waypointsというライブラリを使って、HTML要素が画面の一定位置にきた時にアクションを起こす方法をまとめます。

Waypointsとは

Waypointとは、画面をスクロールしてHTML要素が一定位置にきたタイミングで処理を実行することができるライブラリです。MITライセンスで商用での利用も可能です。

■Waypoints
http://imakewebthings.com/waypoints/

どういうことが出来るのか簡単にデモを用意しました。以下の右側をスクロールしていくとdiv要素に入った瞬間にCSSを変更するというものです。

See the Pen waypoint-jQuery by Nori (@ysnoritnk) on CodePen.

それでは、使用方法について見ていきましょう。

Waypointsの使用方法

まずは、ダウンロードを行います。Waypointsのサイトからダウンロードをクリックしてください。

ダウンロードしたzipファイルを展開するといろんなフォルダとファイルがありますが、「lib」フォルダにある「jquery.waypoints.min.js」を使用します。

こちらのファイルをサイトの「js」フォルダなど適当な場所に配置してください。

HTMLの記載方法

HTMLの</body>要素前に先程の「jquery.waypoints.min.js」を記載します。今回はjQueryを使用するので、jQueryの後に記載をします。

<script src="jquery.waypoints.min.js"></script>
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>waypoint Test</title>
  <link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
  <div class="start"></div>
  <div class="block">画面の上部にくると背景が変わります</div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="jquery.waypoints.min.js"></script>
  <script src="main.js"></script>
</body>
<html>

簡単なCSSも用意しておきましょう。

main.css
.start {
  height: 100px;
  background: skyblue;
}

.block {
  height: 300px;
  background: #aaa;
}

JSファイルの記載方法

今回は、jQueryを使用した記載方法を紹介します。基本の記載方法は以下です。

$('トリガーとなるセレクタ').waypoint({
  handler: function(direction) {
    // 実行したい処理
  }
})

デモは、blockクラスのdivが画面の上部まできたらそのCSSを変えるという処理です。コードは以下になります。

main.js
$('.block').waypoint({
  handler: function(direction) {
    $('.block').css('background','red');
  }
})

これで、先程のデモをつくることができました。

See the Pen waypoint-jQuery by Nori (@ysnoritnk) on CodePen.

他にもオプションがあるので、見てみましょう。

画面の途中でアクションを起こす

先程は画面の一番上で処理が発動しましたが、画面の途中まできた時に処理を実行させたい場面も出てくるかと思います。その場合はoffsetオプションを使います。

main.j
$('.block').waypoint({
  handler: function(direction) {
    $('.block').css('background','red');
  },
  // 0%が画面一番上、100%が画面一番下にきた時に処理をおこなう
  offset: "50%"
})

デモで確認してみてください。

See the Pen waypoints-offset by Nori (@ysnoritnk) on CodePen.

スクロール上下でアクションを起こす

今までは、画面を下スクロールした時に処理が実行されましたが、上スクロールした時は何も起きませんでした。今度は上スクロールした時に元に戻るようにしたいと思います。

main.js
$('.block').waypoint({
  handler: function(direction) {
    if(direction === "down"){
      // 下スクロール時の処理
    } else {
      // 上スクロール時の処理
    }
  },
  offset: "50%"
})

See the Pen MNppgj by Nori (@ysnoritnk) on CodePen.

まとめ

いかがでしたか?

今回は基本的な使い方にフォーカスしてまとめましたが、まだまだオプションがありますので、調べてみてください。Waypointsと一緒にアニメーションなどを使うとサイトがよりおしゃれになりますよ!では!

コメント

タイトルとURLをコピーしました