【jQuery】jquery.inviewを使って、要素が画面に出現したときに処理を実行する

jQueryのプラグイン「jquery.inview」を紹介します。このプラグインを使うと、ある要素が「画面に出現した」や「画面外に出た」というイベント時に処理を実行することができます。

jquery.inviewを使ってみる

jquery.inviewの入手

jquery.inviewの基本的な使い方を紹介します。まずは、githubからjquery.inviewを取得します。(※Forkされたリポジトリに圧縮されたバージョンがあったので、それを使いました。)

jquery.inviewを読み込む

bodyタグの直前で、入手したjquery.inviewを読み込みます。また、jqueryも必要なので読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="./jquery.inview.min.js"></script>

基本的な使い方

使い方は簡単で、inviewというイベントに関数をbindしてあげるだけです。例えば、以下のように、フッター(footer#footer)が出現したときに関数を紐付けできます。この例では、フッターが出現したら「appeared」、フッターが画面から消えたら「disappeared」とログにはいています。

$(function() {
  $("footer#footer").bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
    if (isInView) {  // 要素が画面に出現した場合
      console.log('appeared');
    } else {  // 要素が画面外になった場合
      console.log('disappeared');
    }
  });
});

フッター出現時にソーシャルボタンを表示する

jquery.inviewを使った例として、フッター出現時にソーシャルボタン(Twitter)を表示する方法を紹介します。動きとしては、以下デモのように、画面外からソーシャルボタンが出現します。

デモ

別ウィンドウで表示する場合はこちらをクリックしてください。

HTMLファイルを作成

HTMLのbodyタグの中は大きくわけてulタグ、footerタグ、(ソーシャルボタンを表示する)divタグの3つになります。

ulタグは、footerタグがスクロールしないと表示されないように、距離を稼ぐために配置しています。そして、footerタグが画面に出現したら、divタグを画面外から画面内に移動させます。

<ul>
  <li>ITEM01</li>
  <li>ITEM02</li>
  <li>ITEM03</li>
  <li>ITEM04</li>
  <li>ITEM05</li>
</ul>
<footer id="footer">
  FOOTER
</footer>
<div id="social">
  <a class="twitter-follow-button" href="https://twitter.com/ysk_murayama" data-size="large" data-show-count="false">Follow Me!!</a>
</div>

他にもHTMLファイルでは、CSSファイル、JSファイルやTwitterのスクリプトの読み込みを行います。

CSSファイルを作成

CSSでやっていることは2つだけです。1つ目は、liタグのマージン(下)を広げています。これは、liタグの個数が少なくてもフッターを画面外に追いやるために指定しています。

2つ目は、ソーシャルボタンを表示するdivタグに関するデザインです。positionとbottomを指定して、ソーシャルボタンを画面の一番下に固定しています。

li {
  margin-bottom: 80px;
}
div#social {
  position: fixed;
  bottom: 0px;
}

JSファイルを作成

JSファイルでは、ソーシャルボタンのdivタグのleftを変えて表示・非表示を切り替えています。

画面内に表示するときは、leftを「画面の横幅 - divタグの横幅」にすることで、画面の右橋に移動させています。

var $social = $('div#social');  // ソーシャルボタンを配置するdivの要素を取得します。

// アニメーションさせつつ、要素を右端に出現させます。
$social.animate({
  left: $(window).width() - $social.width()
}, 50, 'swing', function() {
});

逆に、画面から消すときは、leftを「画面の横幅」にすることで、画面の外に移動させています。

// アニメーションさせつつ、要素を画面の外に移動します。
$social.animate({
  left: $(window).width()
}, 50, 'swing', function() {
});

ソース全体

今回のサンプルのソースは以下の通りです。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="robots" content="noindex" />
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <ul>
      <li>ITEM01</li>
      <li>ITEM02</li>
      <li>ITEM03</li>
      <li>ITEM04</li>
      <li>ITEM05</li>
    </ul>
    <footer id="footer">
      FOOTER
    </footer>
    <div id="social">
      <a class="twitter-follow-button" href="https://twitter.com/ysk_murayama" data-size="large" data-show-count="false">Follow Me!!</a>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="./jquery.inview.min.js"></script>
    <script>window.twttr = (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0],
        t = window.twttr || {};
      if (d.getElementById(id)) return t;
      js = d.createElement(s);
      js.id = id;
      js.src = "https://platform.twitter.com/widgets.js";
      fjs.parentNode.insertBefore(js, fjs);

      t._e = [];
      t.ready = function(f) {
        t._e.push(f);
      };

      return t;
    }(document, "script", "twitter-wjs"));</script>
    <script src="./base.js"></script>
  </body>
</html>

CSS

li {
  margin-bottom: 80px;
}
div#social {
  position: fixed;
  bottom: 0px;
}

JS

$(function() {
  var $social = $('div#social');  // ソーシャルボタンを配置するdivの要素を取得します。
  var isSocialVisible = false;  // ソーシャルボタンのdivが表示中かを表すフラグを定義します。

  // leftにウィンドウの横幅をセットし、この要素を画面外に配置させます。
  $social.css('left', $(window).width());

  $("footer#footer").bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
    if (isInView) {  // 要素が画面に出現した場合
      if (isSocialVisible) {
        // 既に表示済みならば処理を終了します。
        return;
      }
      // アニメーションさせつつ、要素を右端に出現させます。
      $social.animate({
        left: $(window).width() - $social.width()
      }, 50, 'swing', function() {
        isSocialVisible = true;  // フラグを切り替えます。
      });

    } else {  // 要素が画面外になった場合
      if (!isSocialVisible) {
        // 既に画面外にある場合は処理を終了します。
        return false;
      }
      // アニメーションさせつつ、要素を画面の外に移動します。
      $social.animate({
        left: $(window).width()
      }, 50, 'swing', function() {
        isSocialVisible = false;  // フラグを切り替えます。
      });
    }
  });
});

この記事が役に立った場合、シェアしていただけると励みになります!!