スマホ用、次のページを重ねて遷移させるトランジション

謎のプリン語る。
プログラミングの役立つ情報とか、どうでもいい雑談とか書いてます。
一人書く人増えました。

スマホ用、次のページを重ねて遷移させるトランジション

みやびプリン 500 316

144 144

※この記事は9年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。

どうも、未だiPhone 4Sのみやびです。

ほんとね、買うときiPhone 5出てたのにね。
いいんだ、俺は12月に6にするんだ。

さて、では、いっちょ言ってみましょう、今日の題号。

今回は、iPhoneアプリのページ遷移の動きを、なんとかWEBでも実現できないか、といろいろやってみたもの。
整理とかプラグイン化とかしてなく、かなり雑なコードなのであしからず。

まず、HTML側

●HTML 

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スマホページ</title>
<meta name="Keywords" content="Keyword01,Keyword02,Keyword03">
<meta name="Description" content="Discription">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="author" content="MIYABI PURINE">

<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="/webclip.png">

<link rel="stylesheet" type="text/css" href="common/css/common.css" media="all">
<script src="common/js/jquery.js"></script>
<script src="common/js/easing.1.3.js"></script>
<script src="common/js/default.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header-container">
<header>
 <h1>タイトル</h1>
</header>
<nav>
 <ul class="clearfix"><!--
  --><li><a href="./"><img src="common/images/nav001.gif" width="137" height="150" alt="ナビゲーション-ホーム"></a></li><!--
　トランジションをきかせたいリンクには、classに、right-move、hrefには、javascript: void(0)、data-hrefにリンク先を入れる
  --><li><a href="javascript: void(0);" data-href="about/" class="right-move"><img src="common/images/nav002.gif" width="191" height="150" alt="ナビゲーション-このサイトについて"></a></li><!--
  --><li><a href="ranking/"><img src="common/images/nav003.gif" alt="ナビゲーション-ランキング" width="217" height="150"></a></li><li><a href="grume/"><img src="common/images/nav004.gif" width="179" height="150" alt="ナビゲーション-グルメ"></a></li><!--
  --><li><a href="member/"><img src="common/images/nav005.gif" alt="ナビゲーション-メンバー"></a></li><!--
 --></ul>
</nav>
</div>
<section id="contents">
<div>
 <p>
  ホームページ<br>
  ホームページ<br>
  ホームページ<br>
  ホームページ<br>
  ホームページ<br>
  ホームページ<br>
  ホームページ<br>
  ホームページ<br>
  ホームページ<br>
  ホームページ<br>
  ホームページ<br>
  ホームページ<br>
  ホームページ<br>
  ホームページ<br>
  ホームページ
 </p>
</div>
</section>
<footer id="all-footer">
 <p><small>Copyright (C) 2015 MIYABI PURINE All Rights Reserved.</small></p>
</footer>
</div><!-- /wrapper -->

</body>
</html>

リンク以外の部分はなんの変哲もないHTMLです。
jQueryと、イージングプラグインを読み込み、
default.jsによって処理を書いてます。
上の方の、IDに"header-container"とつけてるDivは、position:fixedで、固定する予定。
あとは、重ねるトランジションをきかせたいリンクには、hrefには、"javascript: void(0);"でリンクを無効にし、
classに"right-move"、data-hrefに、リンクさせたいURLを突っ込んでます。
（SEO考えるなら、jQueryで、hrefの値と、data-hrefの値操作する必要があるな・・・）
これでHTMLの準備は完了。

お次はCSS。
これは、必要な箇所（トランジションに関係する箇所）だけ載せます。

●common.css

/* ページ遷移時の動きのためのCSS
jsでiframeを作るので、それを包括するdivのcss */
#next-page-block {
	position: absolute;
	top: 0;
	z-index: 1000;
}

CSSはこれだけw

さて、JSだ。
これもそんなに難しいものではない。

●default.js

$(function() {
	
 //以下次のページ用スクリプト
 // 各種数値を変数に格納（画面の横幅と、縦幅を取得）
 var PageWidth = $('body').width();
 var PageHeight = $('body').height();

 $('.right-move').click(function(){
  //インラインフレーム要素生成
  $('body').append('<div id="next-page-block"><iframe src="about/index.html" frameborder="0" scrolling="no"></iframe></div>');

  //初期の大きさ、位置
  //iframe入りのdivを画面外に飛ばす
  $('#next-page-block').css({
   'width': PageWidth
  });
  $('#next-page-block iframe').attr('width', PageWidth);
  $('#next-page-block iframe').attr('height', PageHeight);

  $('#next-page-block').css({
   'left': PageWidth
  });
  
  //リンク先を取得
  var pass = $(this).attr("data-href");
  //生成したiframeのsrcに突っ込む
  $('#next-page-block iframe').attr('src', pass);
  //iframeのデータが読み込まれたら実行
  $('#next-page-block iframe').bind("load", function() {
   //スマホの、position: fixedのバグを見えなくするために、スクロールを0に
   $('html,body').animate({
    scrollTop: 0},
    300,'easeOutCubic', function() {
     //iframe入りのdivを左に移動
     $('#next-page-block').animate({
      "left":0
     },500, 'easeOutCubic',function(){
      //現在のページを消す
      $('#wrapper').hide();

      //次のページをAJAXにて先読み、成功したらURLを変更する
      $.ajax({
       type: 'GET',
       url: pass,
       dataType: 'html',
       success: function(data) {
        location.href = pass;
       }
      });
     });
   });
			
			
   return false;
  });
		
 });

});

みそなのは、iframeをjsにて生成し、そこでまずリンク先ページを表示させて、
そのiframeを移動させている点と、
ページ移動の際、AJAXにて、リンク先を先読みしてる点。

先読みをしていないと、実機では、処理速度が追いつかなく、
ページ遷移の際に、一瞬白い画面が表示されてしまう。

ひとまず、これにて、iPhoneアプリっぽいページ遷移のできあがりだ。

一つ悔しいのは、スマホのposition:fixedのバグのおかげで、
一度スクロールを0にしなきゃいけないこと。
スクロールした状態で、トランジションすると、
読み込み最初、position:fixedを効かせているブロックがスクロールした状態で表示されてしまうのだ。

そこなんとかならんもんかな・・・。

まぁでも、あんまし違和感ないです。
いろんなトランジションいれて、プラグインでも作ってみっかな。

トラックバック(0)

トラックバックURL:

コメントする

※
※
※

ページトップへ戻る