ページ遷移をスライド形式にしてみた

logwのページ遷移をスライド形式にちょっとしてみました。jQueryでページ遷移時にスライドアニメーションをつけてみる【改訂版】 さんのページのスクリプトを使わせていただいています。

wordpressで使ってみる

wordpressのサイトで使ってみたかったので使わせていただきました。僕の場合はbodyに既にIDが入っているので以下のように変更させていただきました。

$(function(){
$('#center:not(body#default #center)').css({display:'block',marginLeft:$(window).width(),opacity:'0'});
$('#center:not(body#default #center)').animate({marginLeft:'0px',opacity:'1'},500);
$('body#default #center').css({display:'block',opacity:'0'});
$('body#default #center').animate({opacity:'1'},500);
$('a').click(function(){
var pass = $(this).attr("href");
$('#center').animate({marginLeft:'-=' + $(window).width() + 'px',opacity:'0'},500,function(){
location.href = pass;
setTimeout(function(){
$('#center').css({marginLeft:'0',opacity:'1'})
},10000);
});
return false;
});
});

変更点

logwはテーマに既にdefaultと入っているのでdefaultに変更しましたサンプルでは｢#container｣となっていた箇所もlogwでは｢#center｣なので変更しました。 ちなみに最初は｢#contents｣の部分にしたら全体ではなくコンテンツ部分がスライドしたのでページ全体のID要素を指定しないといけないです。

追記

サイドバーにタブを導入した関係でページ遷移を停止しました。