かなり前に「jQueryでページ遷移時にアニメーション効果をつけてみる。」と題して、
jQueryでページ遷移時に画面をスライドさせるアニメーション効果をつけるSCRIPTを紹介しましたが、
どうやらブラウザによって、画面遷移後にブラウザの「戻る」ボタンで前画面に戻ると
遷移時にアニメーション用の動作として操作したCSSの指定が残ってしまって
画面が真っ白になることがあったので、その不具合対応版を作ってみました。
jQuery PAGE SLIDE MOVE
まずはサンプルから
【改訂版】サンプルはこちら※「次へ」をクリックしていくとページ全体がスライドして遷移します。
画面内の「次へ」などをクリックして画面遷移した後、
ブラウザの「戻る」ボタンを押しても画面が真っ白にな現象は発生しないと思います。
※以前の記事のサンプルはブラウザによって画面が真っ白になります。
以前の記事の内容から
HTMLやCSSについては特別な指定は追加していません。
SCRIPT側にでページ遷移後に
画面の要素を外に飛ばした後に元に戻す指定を加えます。
◆SCRIPT
$(function(){
$('#container:not(body#index #container)').css({display:'block',marginLeft:$(window).width(),opacity:'0'});
$('#container:not(body#index #container)').animate({marginLeft:'0px',opacity:'1'},500);
$('body#index #container').css({display:'block',opacity:'0'});
$('body#index #container').animate({opacity:'1'},500);
$('a').click(function(){
var pass = $(this).attr("href");
$('#container').animate({marginLeft:'-=' + $(window).width() + 'px',opacity:'0'},500,function(){
location.href = pass;
setTimeout(function(){
$('#container').css({marginLeft:'0',opacity:'1'})
},100);
});
return false;
});
});
コンテンツ要素をブラウザ幅分アニメーションで外へ飛ばした後
「location.href = pass;」でリンク先へ遷移し、
その後は「setTimeout」を使ってアニメーションさせた要素に対して
元の位置に戻す指定を加えておきます。
この指定を入れておくことで
遷移後にブラウザの「戻る」ボタンで前画面に戻った後も
コンテンツ要素が元の位置に戻った状態になります。
画面遷移時のアニメーション動作は
スライドのみならず、フェードなど様々な魅せ方が出来ることに加えて、
スマートフォン向けサイトでは、何かと効果的に使える演出だと思うので
今後もいろいろ組み込んでいきたいです。
ご参考までに。。。