【Animsition】ウェブサイトの遷移時にアニメーションを追加しながらページ移動ができるjQueryプラグイン

2016.07.25

ホームページで下層ページに移動するときにちょっとアニメーションを追加したい

イメージ画像
ウェブアプリやブランディングサイトなど、
ページ遷移やリンクアクションのアニメーションにもこだわりたい時に便利なjQueryプラグインが「Animsition」です。

使い方はかなり簡単で、
まずjQuery本体とダウンロードしたanimsition.min.css、animsition.min.jsを一緒に読み込みます。
HTML:
<link rel="stylesheet" href="css/animsition.min.css">
<script src="js/jquery.js"></script>
<script src="js/animsition.min.js"></script>
次に、リンクアクションの場合はaタグに
HTML:
<a href="page.html" class="animsition-link" data-animsition-out-class="fade-out-right" data-animsition-out-duration="2000">link</a>
という形で直接リンクタグに「animsition-link」というClassを付与、独自データ属性(data-*)を使ってパラメータを指定して記述します。

アニメーションは、
「Fade(10種類)」「Rotate(2種類)」「Flip(4種類)」「Zoom(2種類)」の合計18種類用意されています。

イベントやメソッドも用意されているので、
簡単な実装から少し手の込んだ処理まで行うことができるオススメのjQueryプラグインです。

参考にしたホームページ・ブログ- I thank for this article. -

← 【WAIT! Animate】CSSのキーフレームを使った複雑なアニメーション作成できるウェブサービス
【Particleground】ウェブサイトの背景に幾何学的でジオメトリックな模様を表示できるjQueryプラグイン →