ページ遷移時におしゃれなアニメーションをつけるjQueryプラグイン「Animsition」

最近ページ遷移でおしゃれに動いているサイト多くなりましたよね。
実現したいなーって人多いんじゃないでしょうか。
jQueryプラグインのAnimsitionならそりゃーもうさくっと実現できますよ!
ページ遷移時におしゃれなアニメーションをつけるjQueryプラグイン「Animsition」サンプル

使用方法
Animsitionからファイル一式をダウンロード。
<link rel="stylesheet" href="animsition.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="animsition.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".class名").animsition({
inClass : 'fade-in-left', //ページ表示時のアニメーション
outClass : 'fade-out', //遷移時のアニメーション
inDuration : 1500, //inするときの時間
outDuration : 800, //out時の時間
linkElement : '.animsition-link', //対象のリンク
touchSupport : true, //タップOK
loading : true, //ローディングOK
loadingParentElement : 'body', //アニメーション対象
loadingClass : 'animsition-loading', //ローディングのclass
});
});
</script>

あとはリンクを下記のように記述すれば完成です。
<div class="class名">
<a href="リンク先" class="animsition-link">テキスト</a>
</div>

なお、aタグにすべてのオプションを記述しても構いません。
<div class="class名">
<a href="リンク先" class="animsition-link" data-animsition-out="fade-out-right" data-animsition-out-duration="2000">テキスト</a>
</div>

アニメーションは下記があります。
fade-in
fade-out
fade-in-up
fade-out-up
fade-in-down
fade-out-down
fade-in-left
fade-out-left
fade-in-right
fade-out-right
rotate-in
rotate-out
flip-in-x
flip-out-x
flip-in-y
flip-out-y
zoom-in
zoom-out

ページ遷移時におしゃれなアニメーションをつけるjQueryプラグイン「Animsition」サンプル

sponsors

「ページ遷移時におしゃれなアニメーションをつけるjQueryプラグイン「Animsition」」をシェアする

記事作成:
記事URL:

TOP > > > ページ遷移時におしゃれなアニメーションをつけるjQueryプラグイン「Animsition」