一款jquery弹性动画特效插件DomLastic.js

所属分类:其他-动画效果

 2464  28  查看评论 (1)
一款jquery弹性动画特效插件DomLastic.js ie兼容10

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弹性动画特效插件的可用配置参数如下:

参数类型默认值
itemsClassnameToConnectstring
itemsJointStrengthint20
animationSpeedint(毫秒)600
animationIntensityfloat0.5
animationDirectionstring默认为'horizontal',可选值为'vertical'
callback函数

animationDirection类型:

  • 'horizontal'

  • 'vertical'

实例:

<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();
相关插件-动画效果

图标点击反馈特效

HTML5 CSS3 SVG 制作的图标点击反馈特效,点击出现波纹、飞溅、滴水、loading等效果
  动画效果
 12914  201

Google Doodle粘土动画

Google Doodle粘土动画
  动画效果
 8526  60

非常简单好用的一个数字滚动插件countUP

通过给JQuery 添加方法,可以定义小数点前后显示位数,数字后面是否显示%或者其他符号,并带有回调函数。
  动画效果
 11083  93

canvas 雨滴

这款动画主要是模拟了下雨的场景,雨滴从空中飘落,落在地上溅起水花,整个过程模拟得相当逼真。更重要的是,这款HTML5下雨动画还可以通过鼠标控制风向和雨水强度,鼠标左右滑动控制雨滴方向,鼠标上下滑动控制雨滴密度。
  动画效果
 3064  48

讨论这个项目(1)回答他人问题或分享插件使用方法奖励jQ币

    SiriBen 0
    2017/12/7 10:17:41

    没有参数说明么?参数的作用是啥?

    回复
取消回复