Animsition可轻松的为页面切换添加18种不同风格的动画效果,动画特效可以应用到任何网站,也可以使用不同的效果在同一页面上。
官方问站:http://git.blivesta.com/animsition/
Github地址:https://github.com/blivesta/animsition
使用方法:
需要加载插件样式文件animsition.min.css、jquery.js、animsition.min.js
<link href="../css/animsition.min.css" rel="stylesheet"> <script src="../jquery.min.js"></script> <script src="../js/animsition.min.js" charset="utf-8"></script>
例如上滑动动画,在页面任意位置添加:
<div class="animsition-overlay"></div>
添加调用代码:
<script type="text/javascript"> jQuery(document).ready(function($) { $('.animsition-overlay').animsition({ inClass: 'overlay-slide-in-top', outClass: 'overlay-slide-out-top', overlay: true, overlayClass: 'animsition-overlay-slide', overlayParentElement: 'body' }).one('animsition.inStart', function() { $('body').removeClass('bg-init'); $(this).find('.item').append('<h2 class="target">Callback: Start</h2>'); console.log('event -> inStart'); }).one('animsition.inEnd', function() { $('.target', this).html('Callback: End'); console.log('event -> inEnd'); }); }); </script>
效果还是很炫酷,缺点是:只有页面所有元素完全加载完,才能显示动画,有点鸡肋...
本站文章大部分为原创,用于个人学习记录,可能对您有所帮助,仅供参考!
我的微信
微信号已复制
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!