NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

ページを遷移する際にローディングアニメーション付きでフェードやその他アニメーション効果を与えることができる「Animsition」

2014年12月12日jQueryプラグイン活用

ページを遷移する際にローディングアニメーション付きでフェードやその他アニメーション効果を与えることができる「Animsition」

ページ間を遷移する際の切り替え時に、ローディングアニメーションを追加し、フェードやその他色々なアニメーション効果を与えることができます。

デモページ

JavaScript

(function($){
	$(function(){
		 $("#container").animsition();
	});	
})(jQuery);

HTML

<div id="container" class="animsition" data-animsition-in="fade-in" data-animsition-out="fade-out">
	<a href="fade.html" class="animsition-link" data-animsition-out="fade-out">fade</a>
	<a href="fade-up.html" class="animsition-link" data-animsition-out="fade-out-up-sm">fade up</a>
	<a href="zoom.html" class="animsition-link" data-animsition-out="zoom-out-sm">zoom</a>
</div>

CSS

#container {
	text-align: center;
}
#container a {
	display: inline-block;
	width: 20%;
	padding: 14px 10px;
	margin: 0px 8px;
	text-align: center;
	border: 1px solid #ffbc30;
	color: #ffffff;
	background-color: #ffbc30;
	text-decoration: none;
}
#container a:hover {
	color: #ffbc30;
	background-color: #ffffff;
}	

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. ページを遷移する際にローディングアニメーション付きでフェードやその他アニメーション効果を与えることができる「Animsition」

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com