iOS7のかっこいいエフェクトを使ってコンテンツとナビゲーションを切り替えるスクリプト -iOS7 Zoom

iOS7のさまざまなシーンで利用されているズームを使って、コンテンツからナビゲーションを切り替えるjQuery+CSS3のかっこいいエフェクトを紹介します。

デモのアニメーション

コンテンツから左上のボタンをタップ・クリックすると、ズームを使ってコンテンツを縮小し、ナビゲーションをダイナミックに表示します。
デモはデスクトップだけでなく、スマフォのブラウザでも動作します。

実際の動作は、下記ページで試してください。

iOS7 Zoom - out Side Nav Reveal

スクリプトはjQueryを使って、下記のスクリプトを記述します。

(function($) {
  jQuery(document).ready(function() {

    $('.toggleMenu').click(function() {
      var windowHeight = $(window).height();
      if ($('body').hasClass('active-nav')) {
        $('.page-wrap').height('auto'); //resets height for scolling
      } else {
        $('.page-wrap').height(windowHeight); //sets height to cut page to visible window size
      }
      $('body').toggleClass('active-nav');
    });

  });

}(jQuery));

HTMLの基本構造は、こんな感じ。

<div class="under-nav">
  <nav class="mobile-nav">
    <ul>
      <li>ナビゲーション</li>
      <li>ナビゲーション</li>
    </ul>
  </nav>
</div>

<div class="page-wrap">
  <div class="mobile-top-bar">
    <div class="toggleMenu">ボタン</div>
  </div>
  
  <div class="main">コンテンツ</div>
</div>

アイデアの元となったのは下記のDribbbleのアートワークで、トリガーはボタンのタップだけでなく、デバイスを傾けてこういうエフェクトができるのも面白いよね、とのことです。

Social Feed iOS7