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

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

Contents

ページ遷移やリンクアクション時にアニメーションするCSSの記述
ページ遷移やリンクアクション時にアニメーションするHTMLの記述
animsition.jsを使ってページ遷移やリンクアクション時にアニメーションをするJavaScriptの記述
遷移先切替りページ（page2.html）の記述
animsition.jsを使ってページ遷移やリンクアクション時にアニメーションするデモページ
ソース元：ANIMSITION

ページ遷移やリンクアクション時にアニメーションする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>