Sayfa Yükleme Geçiş Efektleri Eklentisi - Animsition.js (jQuery)

Sayfa Yükleme Geçiş Efektleri Eklentisi – Animsition.js (jQuery) Geçiş Loading Eklentisi kullanıcıya sayfa yükünüze bağlı olarak estetik geçiş ve hafifletici efektler göstermek için kullanılan basit ve kolay bir jQuery eklentisidir.

Eklentinin github sayfasına ve dosyalarına buradan ulaşabilirsiniz. Demo adresine ve örneklerine ulaşmak için burayı tıklayınız.

Nasıl Kullanılır?

1- Gerekli jQuery javascript kitaplığını ve jQuery Animsition eklentisini sayfanıza yükleyin.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="dist/animsition.min.js"></script><br>

1 2	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="dist/animsition.min.js"></script><br>

2. Gerekli CSS dosyasını sayfanızın head bölümüne yükleyin.

<link rel="stylesheet" href="css/animsition.min.css">

1	<link rel="stylesheet" href="css/animsition.min.css">

3. Html öğeniz için Animsition efektini etkinleştirin.

$(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 wrapper element
loadingClass  :   'animsition-loading',
unSupportCss  : [ 'animation-duration',
  '-webkit-animation-duration',
  '-o-animation-duration'
],
overlay       :   false,
overlayClass  :   'animsition-overlay-slide',
overlayParentElement  :   'body'
});
});

$(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 wrapper element

loadingClass : 'animsition-loading',

unSupportCss : [ 'animation-duration',

'-webkit-animation-duration',

'-o-animation-duration'

overlay : false,

overlayClass : 'animsition-overlay-slide',

overlayParentElement : 'body'

});

4. Animasyon başlangıç / bitiş olayları.

$(".animsition").animsition({
  // options
}).one('animsition.start',function(){
  ...
})

$(".animsition").animsition({
  // options
}).one('animsition.end',function(){
  ...
})<br>

$(".animsition").animsition({

// options

}).one('animsition.start',function(){

...

})

$(".animsition").animsition({

// options

}).one('animsition.end',function(){

...

})<br>

Yazar: Fatih Soysal

Kullanım ve kodlama mükemmeliyetini odak alan uygulamalar oluşturma deneyimine sahip, profesyonel olarak 15+ yıl üzeri deneyime sahip bir yazılım mühendisi. Fatih Soysal tarafından yazılan tüm yazılar