ページ遷移時にエフェクトを与えるjQueryプラグイン「jQuery Pageswitch Plugin」

ページ遷移の際に何らかのエフェクトが発生するサイトがありますが、今回紹介するjQuery Animated Pageswitch Pluginを利用することで、それを簡単に再現可能です。
ページ遷移時にエフェクトを与えるjQueryプラグイン「jQuery Pageswitch Plugin」サンプル

使用方法
jQuery Animated Pageswitch Pluginからファイル一式をダウンロードします。
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script src="jquery.pageswitch.js" type="text/javascript"></script>
<script>
$(function() {
$('#id名 a').pageswitch({
url: '/test/', //遷移先URL(通常のaタグでの指定でも問題ありません)
properties: { marginLeft: -$('body').width() }, //エフェクト(左の例は、marginをbody分与えて動かしています)
options: { duration: 1000 } //速度
})
});
</script>

上記以外には下記のようにすることでフェードを再現することが可能です。
properties: { opacity: 0 }
あとはリンクを記述すれば完成です。
<div id="demo">
<a href="/test/">リンク先</a>
</div>

前述の通り、ここのhrefで指定しても構いませんし、js内に記述しても問題ありません。

ページ遷移時にエフェクトを与えるjQueryプラグイン「jQuery Pageswitch Plugin」サンプル

sponsors

「ページ遷移時にエフェクトを与えるjQueryプラグイン「jQuery Pageswitch Plugin」」をシェアする

記事作成:
記事URL:

TOP > > > ページ遷移時にエフェクトを与えるjQueryプラグイン「jQuery Pageswitch Plugin」