Fatih SoysalSayfa 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.
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.
1 | <link rel="stylesheet" href="css/animsition.min.css"> |
3. Html öğeniz için Animsition efektini etkinleştirin.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | $(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ı.
1 2 3 4 5 6 7 8 9 10 11 | $(".animsition").animsition({ // options }).one('animsition.start',function(){ ... }) $(".animsition").animsition({ // options }).one('animsition.end',function(){ ... })<br> |
