jwtextureswim-可制作背景图片动画的jQuery插件 A jQuery Plugin To Animate Background Images

...You should see movement!

That's how to animate background images using jQuery and jwTextureSwim. As easy as that. But, what if you want to swim multiple elements at the same time?

Multiple Elements

As quickly as you were able to setup and swim your first element, it's just as intuitive to do the same for multiple elements. Add a couple of new divs to your HTML, and give one of them a different class name.

For those using my CSS, you can use .checker and .chess. (Also, you can add .third to fit them shoulder-to-shoulder.)

// Head + Body

<!-------------------------------------------->
<!------------- New Div Setup ---------------->
<!-------------------------------------------->
<div class="checker third">Checkers...</div>
<div class="chess third">Chess...</div>
<div class="checker third">Checkers...</div>

// Scripts

And update your <script> with the new class. It's ok to share the same call!

<script type = "text/javascript">
  $(".checker, .chess").textureSwim();
</script>

You're starting to see the picture...

Animate Texture Backgrounds in X and Y Directions

So your background textures are animating thanks to a little jQuery and jwTextureSwim, but you want more than a scroll to the right, right? Let's change the direction of some of the elements.

First, give each of our 3 elements its own, distinct id: something like d1, d2, and d3.

// Head + Body

<!-------------------------------------------->
<!------------- Add Unique IDs --------------->
<!-------------------------------------------->
<div id="d1" class="checker third">Checkers...</div>
<div id="d2" class="chess third">Chess...</div>
<div id="d3" class="checker third">Checkers...</div>

// Scripts

Next, we need to change the directions. By default, jwTextureSwim uses a distanceX of 500px (moves to the right on the X-axis) and a distanceY of 0px (does not move vertically on the Y-axis) over a duration of 5000ms (5 seconds). But let's change all that!

<script type = "text/javascript">
  // $(".checker, .chess").textureSwim(); // No longer needed
  $("#d1").textureSwim({distanceX: -500});
  $("#d2").textureSwim({distanceY: 200});
  $("#d3").textureSwim({distanceX: -300, distanceY: -200});
</script>