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
Asp.net ile basit kullanıcı ekleme, listeleme, silme ve güncelleme
Yazıyı Oku

Asp.net ile basit kullanıcı ekleme, listeleme, silme ve güncelleme

Nesne tabanlı programlama uygulamaları (try - catch - finally)
Yazıyı Oku

Nesne tabanlı programlama uygulamaları (try - catch - finally)

Asp.net ile veritabanına bağlanma ve basit kayıt ekleme, listeleme, silme, güncelleme
Yazıyı Oku

Asp.net ile veritabanına bağlanma ve basit kayıt ekleme, listeleme, silme, güncelleme

İnternet programcılığı çerez (cookie), oturum yönetimi (session) ve grafik uygulamaları
Yazıyı Oku

İnternet programcılığı çerez (cookie), oturum yönetimi (session) ve grafik uygulamaları

Css ile web sayfası tasarımı örneği yapımı
Yazıyı Oku

Css ile web sayfası tasarımı örneği yapımı

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

Menu