[JS]ページ遷移にフェードやスクロールのアニメーションを加えるスクリプト -Pageswitch

Post on:2010年11月24日

Pageswitchの実装

実装は簡単です。

HTML

既存のHTMLに、特に手を加える必要はありません。
idに使用している「example」は適当なものに変更できます。

<div id="example">
	<a href="//coliss.com/">Example #1</a><br />
	<a href="http://www.example.com">Example #2</a><br />
</div>

[ad#ad-2]

JavaScript

PageswitchはjQueryのプラグインのため「jquery.js」と当スクリプトを外部ファイルにし、下記のように各リンクにエフェクトを指定することができます。

$(document).ready(function() {
	$('#example a:eq(0)').pageswitch(); // select the first a-tag and use standard settings for the animation										
	$('#example a:eq(1)').pageswitch({ // select the second a-tag
		url:		'//coliss.com/', // overwrites the a-href
		properties: { marginLeft: -$('body').width() }, // manipulates the margin of the target	
		options: 	{ duration: 1000 } // sets the duration of animation
	});
});