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

リンクをクリックしてページを遷移する際に、フェードやスクロールのアニメーションを加えるスクリプトを紹介します。

デモのキャプチャ

jQuery Pageswitch Plugin

[ad#ad-2]

デモでは「Example #1」がフェードして遷移、「Example #2」がスクロールして遷移します。

デモのキャプチャ

デモページ

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
	});
});

Pageswitchのオプション

スクリプトのオプションは下記のようになります。

url
遷移先のURLの指定。デフォルトはhref内のデータ。
event
トリガーとなるマウスイベント。click, mouseover など。
target
アニメーションのターゲットのセレクタ。複数指定可。
properties
アニメーション方法。フェードやスクロールなど。
options
アニメーションの時間。

sponsors

top of page

©2018 coliss