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

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

wordpressで使ってみる

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

[js]
$(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;
});
});
[/js]

変更点

logwはテーマに既にdefaultと入っているのでdefaultに変更しましたサンプルでは「#container」となっていた箇所もlogwでは「#center」なので変更しました。

ちなみに最初は「#contents」の部分にしたら全体ではなくコンテンツ部分がスライドしたのでページ全体のID要素を指定しないといけないです。

追記

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

この記事に関する技術サポート・ご相談

「手順通りにいかない」「自社環境への構築を代行してほしい」など、
インフラ・サーバー周りでハマった際はお気軽にご相談ください。

相談・問い合わせフォームを開く

※ Googleフォームへ移動します(初回相談無料)

個人支援・寄付について

サイトラボでは個人支援・寄付を受けております。ご協力いただける方はお願いいたします。当サイトではビットコインで受け付けております。

  • ビットコイン:3LHnADwZwUbic2L45EnVJEykiG6KfbqrwS