当前位置:JS特效 » 其他 » jquery弹性动画特效插件DomLastic.js
 jquery弹性动画特效插件DomLastic.js
如果您觉得内容不错,请分享:
标签: 弹性动画弹性

插件介绍

DomLastic.js是一款jquery弹性动画特效插件。通过该jquery弹性动画特效插件你可以管理一组DOM元素,为它们制作效果炫酷的弹性动画特效。

浏览器兼容性

浏览器兼容性
时间:2021-07-24 阅读:122
简要教程

DomLastic.js是一款jquery弹性动画特效插件。通过该jquery弹性动画特效插件你可以管理一组DOM元素,为它们制作效果炫酷的弹性动画特效。

安装

可以通过npm或bower来安装DomLastic.js jquery弹性动画特效插件。

# NPM
$ npm install domlastic --save

# Bower
$ bower install domlastic --save                  
                

使用方法

在页面中引入jquery和domlastic.js文件。


               
                
HTML结构

对于一组DOM元素,例如一组

元素,你要制作弹性动画效果,其HTML结构如下:

项目1
项目2
项目3
项目4
项目5
项目6
项目7
项目8
项目9
初始化插件

在页面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 函数

例如:

                  
                

callback参数可用于在弹性动画执行结束后的回调函数。

domLastic.init({
  callback: function(){
    // 执行某些操作
  }
});                   
                

如果需要手动执行元素的弹性动画特效,可以使用animateItems()方法。

domLastic.animateItems();                  
                

DomLastic.js jquery弹性动画特效插件的github地址为:https://github.com/ymc-thzi/domlastic

Top