DomLastic.js是一款jquery弹性动画特效插件。通过该jquery弹性动画特效插件你可以管理一组DOM元素,为它们制作效果炫酷的弹性动画特效。
安装
可以通过npm或bower来安装DomLastic.js jquery弹性动画特效插件。
# NPM $ npm install domlastic --save # Bower $ bower install domlastic --save
使用方法
在页面中引入jquery和domlastic.js文件。
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/domlastic.js"></script>
HTML结构
对于一组DOM元素,例如一组<div>
元素,你要制作弹性动画效果,其HTML结构如下:
<div class="listToAnimate"> <div class="item">项目1</div> <div class="item">项目2</div> <div class="item">项目3</div> <div class="item">项目4</div> <div class="item">项目5</div> <div class="item">项目6</div> <div class="item">项目7</div> <div class="item">项目8</div> <div class="item">项目9</div> </div>
初始化插件
在页面DOM元素加载完毕之后,你可以通过下面的方法来初始化该jquery弹性动画特效插件。
domLastic.init({ itemsClassnameToConnect: 'item' });
配置参数
DomLastic.js弹性动画特效插件的可用配置参数如下:
参数 | 类型 | 默认值 |
itemsClassnameToConnect | string | 无 |
itemsJointStrength | int | 20 |
animationSpeed | int(毫秒) | 600 |
animationIntensity | float | 0.5 |
animationDirection | string | 默认为'horizontal',可选值为'vertical' |
callback | 函数 | 无 |
例如:
<div> <div class="item"><img src="..." /></div> <div class="item"><img src="..." /></div> <div class="item"><img src="..." /></div> </div>
<script> domLastic.init({ itemsClassnameToConnect: 'item', itemsJointStrength: 10, //value optimum between 10 - 100 animationSpeed: 500, //value optimum 300 - 1000 animationIntensity: 0.6, //value optimum optimum 0.5 - 1 animationDirection: 'horizontal' }); domLastic.animateItems(); </script>
callback
参数可用于在弹性动画执行结束后的回调函数。
domLastic.init({ callback: function(){ // 执行某些操作 } });
如果需要手动执行元素的弹性动画特效,可以使用animateItems()
方法。
domLastic.animateItems();
DomLastic.js jquery弹性动画特效插件的github地址为:https://github.com/ymc-thzi/domlastic
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!