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.

Animsition.js, animasyonlu sayfa geçiş eklentisi

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'
   });
});
  • Yazı Etiketleri :
  • animsition.js
  • jquery animasyonlu sayfa geçişi
  • animsition css animated page transitions
  • animasyonlu sayfa geçiş efekti eklentisi
Css ile yatay ve dikey menu oluşturma, kutu modeli içerisinde kullanma
Yazıyı Oku

Css ile yatay ve dikey menu oluşturma, kutu modeli içerisinde kullanma

Css ile position: fixed kullanımı
Yazıyı Oku

Css ile position: fixed kullanımı

Css kutu modeli örneği ve float
Yazıyı Oku

Css kutu modeli örneği ve float

Nesne tabanlı programlama metot çağırma uygulamaları
Yazıyı Oku

Nesne tabanlı programlama metot çağırma uygulamaları

Css kutu modeli örneği ve konumlandırma
Yazıyı Oku

Css kutu modeli örneği ve konumlandırma

Css ile çoklu arkaplan uygulaması
Yazıyı Oku

Css ile çoklu arkaplan uygulaması

Menu