ページ遷移の表現に特化したjqueryプラグインまとめ

ゆたろ

2016.12.14

フロントエンドエンジニアのゆたろです。どうもです。

最近、暖房の風で頭がぼーっとしてる毎日を過ごしています。さて、最近はリッチな表現のWebサイトが標準になってきました。コンテンツ以外の表現を求められることもしばしばあります。そんな要件のなか、最近よく聞くページ遷移の表現に特化したプラグインを紹介していきます。

▼目次

シンプルなフェードで遷移 jquery.fademover.js
変形できたり、Overlayできたり animsition.js
カスタマイズ次第でオリジナルの演出 jquery.pjax.js
まとめ

シンプルなフェードで遷移 jquery.fademover.js

http://www.detelu.com/fademover/

jquery.fademover.jsはページ遷移時にフェードイン・フェードアウトをしてくれるプラグインです。プラグイン自体も非常に軽く、実装方法もかんたんなので、サクッと実装したいときにオススメです。

sample

html

--省略--

<div class="stage">
	<ul>
		<li>
			<a href="./index.html">ページ01</a>
		</li>
		<li>
			<a href="./page02.html">ページ02</a>
		</li>
		<li>
			<a href="./page03.html">ページ03</a>
		</li>
	</ul>
	

	<div class="hoge">
		ページ○○
	</div>
</div>

<script src="jquery.js"></script>
<script src="jquery.fademover.js"></script>
<script src="hoge.js"></script>

--省略--

javascript

hoge.js

$(function(){
	$('body').fadeMover();
});

変形できたり、Overlayできたり animsition.js

http://git.blivesta.com/animsition/

animsition.jsは、変形や移動をしながらフェードなど多くの演出がありoptionも豊富なため、よりリッチな動きを実装したい方におすすめです。

sample

html

--省略--

	<link rel="stylesheet" href="animsition.css">
	<link rel="stylesheet" href="hoge.css">
</head>
<body>

<h1>DEMO</h1>
<div class="stage animsition">
	<ul>
		<li>
			<a class="fuga" href="./index.html">ページ01</a>
		</li>
		<li>
			<a class="fuga" href="./page02.html">ページ02</a>
		</li>
		<li>
			<a class="fuga" href="./page03.html">ページ03</a>
		</li>
	</ul>
	

	<div class="hoge">
		ページ○○
	</div>
</div>

<script src="jquery.js"></script>
<script src="animsition.js"></script>
<script src="hoge.js"></script>

--省略--

javascript

hoge.js

$(function(){
	let fuga = '.fuga';
	let $animsition = $('.animsition');

	$animsition.animsition({
		inClass: 'flip-in-x-fr',
		outClass: 'flip-out-x-fr',
		inDuration: 1500,
		outDuration: 800,
		linkElement: fuga
	});
});

カスタマイズ次第でオリジナルの演出 jquery.pjax.js

https://github.com/defunkt/jquery-pjax

jquery.pjax.jsは、pjax(pushState + ajax)を簡単に実装するためのプラグインで、ページ遷移時の演出を実装できます。jquery.pjax.jsは独自のイベントを持っているため、css等で独自のアニメーションを定義して、発火させた後にページ遷移、のようなオリジナルの実装ができます。

sample

html

--省略--

<div class="stage">
	<ul>
		<li>
			<a class="fuga" href="./index.html">ページ01</a>
		</li>
		<li>
			<a class="fuga" href="./page02.html">ページ02</a>
		</li>
		<li>
			<a class="fuga" href="./page03.html">ページ03</a>
		</li>
	</ul>
	

	<div class="hoge">
		ページ○○
	</div>
</div>

<script src="jquery.js"></script>
<script src="jquery.pjax.js"></script>
<script src="hoge.js"></script>

--省略--

javascript

hoge.js

$(function(){
	let hoge = '.hoge';
	let fuga = '.fuga';

	$(document).on('click', fuga, function(e){
		e.preventDefault();
		let href = $(this).attr('href');
		$.pjax({
			url: href,
			container: hoge,
			scrollTo: false
		});
	});
});