スライドパネルのJavaScriptを作成する

　HTMLとCSSの用意ができたので、いよいよスライドのスクリプトを作成します。スクリプトは以下のようになります。

$(function() {
  var winWidth = window.innerWidth;
  
  /**
   * ページ内リンクのクリックイベント
   */
  $('a[href^=#]').click(function() {  
    if ($(this).attr('href') == '#index') {
        goIndex();
    } else {
      $('#index').animate({
        left: (winWidth * -1) + 'px'
      }, 500, function() { $(this).removeClass('active') });
      
      $($(this).attr('href')).css('left', winWidth).addClass('active').animate({
        left: 0
      }, 500);
      return false;
    }
  });
  /**
   * 戻る
   */
  function goIndex() {
    if ($('div.active').attr('id') == 'index') return false;
  
    $('div.active').animate({
      left: winWidth + 'px'
    }, 500, function() { $(this).removeClass('active'); });
    $('#index').css('left', (winWidth * -1) + 'px').addClass('active').animate({
      left: 0
    }, 500);
  }
});

　前に説明した通り、jQueryを使ったスクリプトでは対象の要素に続けてメソッドやイベントを記述していくのが基本です。まず、7行目に注目します。

$('a[href^=#]').click(function() {
...

　a[href=^#]は、a要素でかつhref属性が「#」から始まる要素、つまりページ内リンクを指定したリンク要素を表します。click()は「クリックされたとき」という意味のイベントですので、ページ内リンクがクリックされたときに{ }内のプログラムが実行されます。

　パネルを動かすプログラムの本体は、11行目からになります。

$('#index').animate({
    left: (winWidth * -1) + 'px'
}, 500, function() { $(this).removeClass('active') });
$($(this).attr('href')).css('left', winWidth).addClass('active').animate({
    left: 0
}, 500);

animate()は、任意のCSSプロパティの値を徐々に変化させて、さまざまなアニメーション効果を表現するメソッドです。ここでは、「id属性がindexの要素」＝目次に対して、「leftプロパティを左方向に徐々に変更して左端までずらす」というアニメーションを設定しています。

　画面幅は、あらかじめスクリプトの2行目で取得しています。

var winWidth = window.innerWidth;

　window.innerWidthでは、スマートフォンの端末ごとの画面幅を取得できます。たとえば、iPhoneの画面幅は320pxなので、320×-1＝-320pxまでずらすことになります。

　目次パネルのアニメーションが終わったら、removeClass('active') を実行します。class属性から「active」が取り除かれ、目次パネルが非表示になります。

　続いて、以下のプログラムを見ていきます。

$($(this).attr('href')).css('left', winWidth).addClass('active').animate({
    left: 0
}, 500);

　セレクター部分がやや複雑ですが、まずは $(this).attr('href') だけに注目してください。attr()は「属性を取得する」というメソッドで、ここではクリックされたリンクのhref属性（「#vol01」などの文字列）を取得します。前のプログラムを展開すると次のようになります。

$('#vol01').css('left...

　セレクターの対象が分かったので、各メソッドを確認していきましょう。css()メソッドは任意のCSSプロパティの値を変更します。ここでは「leftプロパティを画面の右端に」と指定し、記事パネルを右側に隠しておきます。

addClass()はclass属性を追加するメソッドで、「active」を追加するとdisplay: blockが適用されてパネルが画面に表示されます。最後に、animate()メソッドでleftプロパティを0に変更し、記事パネルを画面の左端に移動させます。

　以上、解説がかなり長くなりましたが、一連のプログラムが同時に実行されることで、以下のようになります。

1. 目次で項目がタップされる
2. 目次が徐々に画面左端に消えていく。 同時に記事パネルが右端から現れる
3. 目次が左端に消えたあと表示が消え、代わりに記事パネルが表示される

　これで、パネルが左にスライドして切り替わったように見えるわけです。

　「戻る」ボタンをタップしたときは逆の動きをします。表示されている記事パネルを右方向に画面幅分だけスライドさせ、目次パネルを左端から表示させます。「戻る」のプログラムは、次のページで紹介するフリック操作で再利用できるように、goIndex()というファンクションにまとめています。

  /**
   * フリックでの戻る
   */
  document.addEventListener("touchstart", start, false);
  document.addEventListener("touchmove", move, false);
  document.addEventListener("touchend", end, false);
  var startX, endX;
  function start() {
    startX = event.touches[0].pageX;
  }
  
  function move(e) {
    endX = event.touches[0].pageX;
  }
  
  function end(e) {
    if (endX - startX > 100) {
      goIndex();
    }
  }

function start() {
    startX = event.touches[0].pageX;
}

function move(e) {
    endX = event.touches[0].pageX;
}

function end(e) {
    if (endX - startX > 100) {
        goIndex();
    }
}

/**
* 戻る
*/
function goIndex() {
    if ($('div.active').attr('id') == 'index') return false;
        $('div.active').animate({
            left: winWidth + 'px'
        }, 500, function() { $(this).removeClass('active'); });
    $('#index').css('left', (winWidth * -1) + 'px').addClass('active').animate({
        left: 0
    }, 500);
}