どうも、未だ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を効かせているブロックがスクロールした状態で表示されてしまうのだ。
そこなんとかならんもんかな・・・。
まぁでも、あんまし違和感ないです。
いろんなトランジションいれて、プラグインでも作ってみっかな。
コメントする