JavaScript

ページ遷移やリンクアクション時にアニメーションする方法【animsition.js】

animsition.jsを使ってページ遷移やリンクアクション時に、スライド、フェード、回転、フリップ、ズーム等のアニメーションする方法をご紹介します。

ページ遷移やリンクアクション時にアニメーションするCSSの記述

※animsition.cssファイルを読み込みます。その他は必要に応じて変更して下さい。

<style type="text/css">
body{
  font-size: 16px;
  line-height: 1.4em;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 20px;
  padding: 20px 0;
  line-height: 1.4em;
}
</style>
<link href="animsition.css" rel="stylesheet">

ページ遷移やリンクアクション時にアニメーションするHTMLの記述

※アニメーションするページエリア(class=”animsition”)を用意します。ページ遷移するリンクタグにclass=”animsition-link”を設定します。

<div class="animsition">

  <h1>ページ遷移やリンクアクション時にアニメーションします。<br>以下のテキストリンクをクリックするとフェードイン・フェードアウトでページが切替ります。</h1>

<div><a class="animsition-link" href="page2.html">ココをクリックするとページが切替ります。</a></div>
</div>

animsition.jsを使ってページ遷移やリンクアクション時にアニメーションをするJavaScriptの記述

※jquery-1.11.0.min.js、animsition.jsファイルを読み込みます。$(ページアニメーションエリア).animsition()を記述します。

  <script src="jquery-1.11.0.min.js"></script>
  <script src="animsition.js" charset="utf-8"></script>
  <script>
  $(document).ready(function() {
    $('.animsition').animsition();
  });
  </script>

遷移先切替りページ(page2.html)の記述

※用意した遷移先の切替りページ(page2.html)の記述はと切替り前のページ(index.html)とほぼ同じです。

<style type="text/css">
body{
  font-size: 16px;
  line-height: 1.4em;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 20px;
  padding: 20px 0;
  line-height: 1.4em;
}
</style>
<link href="animsition.css" rel="stylesheet">

    </head>
    <body>

<div class="animsition">

  <h1>ページが切替りました。<br></h1>

<div><a class="animsition-link" href="./"><<ココクをクリックすると切替り前のページに戻ります。</a></div>
</div>

  <script src="jquery-1.11.0.min.js"></script>
  <script src="animsition.js" charset="utf-8"></script>
  <script>
  $(document).ready(function() {
    $('.animsition').animsition();
  });
  </script>

animsition.jsを使ってページ遷移やリンクアクション時にアニメーションするデモページ

animsition.jsを使ってページ遷移やリンクアクション時にアニメーションするデモページ

ソース元:ANIMSITION

以下がソース元です。
ANIMSITION

 
※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。