Animsition.js, animasyonlu sayfa geçiş eklentisi

22.03.2015
ilketkinlik
6866

Kullanımı basit ve kolay olan animsition.js, CSS destekli, sayfalar arası animasyonlu geçiş yapılmasını sağlayan bir eklentidir. Her sayfa yüklemesinde aynı ya da farklı bir animasyonu kullanabilirsiniz. 58 farklı sayfa geçiş animasyonuna destek veriyor. Örneğin fade, fade up, rotate, flip, zoom, overlay vb.

Tarayıcı desteği

İlk olarak CSS3 kodlarına destek veren güncel bir tarayıcı kullanmanız gerekiyor. IE10+ , Safari , Chrome , Firefox

Kurulum ve kullanım

Animsition indir Kendi sayfasını ziyaret et

Adım 1: Gerekli olan dosyalara bağlantıyı verin

<!-- 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="/js/jquery.animsition.min.js"></script>

Adım 2: HTML kod bloğunu ekleyin

<body>
   <div class="animsition">
     <a href="./sayfa1" class="animsition-link">animsition bağlantısı 1</a>
     <a href="./sayfa2" class="animsition-link">animsition bağlantısı 2</a>
   </div>
</body>

Eğer sayfadaki her bağlantının farklı animasyonla çalışmasını istiyorsanız:

<a 
   href="./sayfa1" 
   class="animsition-link"
   data-animsition-out="fade-out-right"
   data-animsition-out-duration="2000"
   >
      animsition bağlantısı 1
</a>

<a
   href="./sayfa2"
   class="animsition-link"
   data-animsition-out="rotate-out"
   data-animsition-out-duration="500"
   >
      animsition bağlantısı 2
</a>

Eğer her sayfanın başka animasyona sahip olmasını istiyorsanız:

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

Adım 3: Animsition ayarlarını sayfanıza ekleyin

$(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^=#])'
       loading : true,
       loadingParentElement : 'body', //animsition sarıcı (wrapper) etiketi
       loadingClass : 'animsition-loading',
       unSupportCss : [ 'animation-duration',
                        '-webkit-animation-duration',
                        '-o-animation-duration' ],
       //"unSupportCss" seçeneği tarayıcınız tarafından desteklenmeyen css özelliklerini bir dizi içerisinde yazarak pasif hale getirmenizi (devre dışı bırakmanızı) sağlar.
       //Varsayılan ayarlamada "animation-duration" özelliğini desteklemeyen tarayıcılar için "animsition" devre dışı bırakılmıştır.

       overlay : false,
       overlayClass : 'animsition-overlay-slide',
       overlayParentElement : 'body'
   });
});