jwtextureswim是一款可以制作背景图片动画特效的jQuery插件。通过该插件你可以在任何容器的水平和垂直方向上制作背景图片的动画。非常适合用于制作Banner和一些特定区域的动画效果。

使用方法

首先需要引入jQuery和jwtextureswim-1.0.js文件。

<script src="jquery-1.11.0.min.js"></script>
<script src="jwtextureswim-1.0.js"></script>
HTML结构

你可以在任何容器中添加背景图片动画特效。

<div class="checker">jwQuakeText</div>
CSS样式

你可以为你的容器自定义背景图片，例如为上面的容器添加了一个国际象棋棋盘的背景图片。

.checker{
  background: url('../images/checker_bg.png') white; 
  font-size: 2.0em; 
  text-align: center; 
  padding: 50px 0px; 
  color: #222;
}

添加后得到的结果如下所示：

棋盘格背景

初始化插件

在页面DOM元素加载完毕之后，可以通过textureSwim()方法来初始化该插件。

$(".checker").textureSwim();

配置参数

下面有一些配置参数可以调整背景图片的动画效果。

  • distanceX：类型：int。在一个循环中水平方向上纹理的运动距离，单位像素。默认值500，传入一个负数会向左运动。
  • distanceY：类型：int。在一个循环中垂直方向上纹理的运动距离，单位像素。默认值0，传入一个负数会向上运动。
  • duration：类型：int。单位毫秒。纹理移动一个循环的时间。默认值5000。
  • delay ：类型：int。单位毫秒。每次动画结束后的延迟时间。
  • ease：类型：string。动画的easing函数。默认值为Linear。
  • repeat：类型：int。重复动画的次数。默认值：-1，表示无限循环。