Простий спосіб додавання CSS анімації до переходів між сторінками

29 серпня 2014 22:29 andreykko 516 1

Радий з вами поділитися цікавим та дуже простим JQuery плагіном Аnimsition. Animsition дає можливість додавати до посилань CSS анімацію при переході.

Animsition має 18 різних анімацій:

Зникнення

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 CSS -->
<link rel="stylesheet" href="../css/animsition.min.css">
<!-- vendor js -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- animsition js -->
<script src="../dist/js/jquery.animsition.min.js"></script>

Крок другий: HTML розмітка

<body>
  <div class="animsition">
    <a href="./page1" class="animsition-link">animsition link 1</a>
    <a href="./page2" class="animsition-link">animsition link 2</a>
  </div>
</body>

Якщо Ви бажаєте різну анімацію для різних посилань:

<a 
  href="./page1" 
  class="animsition-link" 
  data-animsition-out="flip-out-y"
  data-animsition-out-duration="2000"
>
  animsition link 1
</a>
<a 
  href="./page2" 
  class="animsition-link" 
  data-animsition-out="rotate-out"
  data-animsition-out-duration="500"
>
  animsition link 2
</a>

Якщо ви хочете виставити кожній сторінці різну анімацію:

<div 
  class="animsition" 
  data-animsition-in-class="zoom-in"
  data-animsition-in-duration="1000"
  data-animsition-out-class="zoom-out"
  data-animsition-out-duration="800"
>
  ...
</div>

Крок третій: Викликаємо Animsition

$(document).ready(function() {
  $(".animsition").animsition({
    inClass               :   'fade-in',
    outClass              :   'fade-out',
    inDuration            :    1500,
    outDuration           :    800,
    linkElement           :   '.animsition-link', 
    // e.g. linkElement   :   'a:not([target="_blank"]):not([href^=#])'
    touchSupport          :    true, 
    loading               :    true,
    loadingParentElement  :   'body', //елемент-обгортка для animsition
    loadingClass          :   'animsition-loading',
    unSupportCss          : [ 'animation-duration',
                              '-webkit-animation-duration',
                              '-o-animation-duration'
                            ]
  });
});

Демо

Github

js, css3, html, jquery, javascript