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
Fare tıklamasını takip eden nesne - AS2 ile
Yazıyı Oku

Fare tıklamasını takip eden nesne - AS2 ile

play() ve stop() komutları - AS2 ile
Yazıyı Oku

play() ve stop() komutları - AS2 ile

startDrag ve stopDrag kullanımı - AS3 ile
Yazıyı Oku

startDrag ve stopDrag kullanımı - AS3 ile

3 boyutlu nesne döndürme - AS3 ile
Yazıyı Oku

3 boyutlu nesne döndürme - AS3 ile

gotoAndPlay ve stop kullanımı - action script ile
Yazıyı Oku

gotoAndPlay ve stop kullanımı - action script ile

Güneş çevresinde dönen dünya - kılavuz katman ile
Yazıyı Oku

Güneş çevresinde dönen dünya - kılavuz katman ile

Menu