jwTextureSwim
A jQuery plugin to Animate background textures
$(".swim").textureSwim();
My website looked pretty good with the background texture I was using, but for some reason, it felt...boring. I wanted to see what it looked like with a little motion.
Mixing jQuery animation and CSS is great. But there are some things that don't quite work as you would like, right-out-of-the-box. With the standard animate() function, I wasn't able to make multiple changes to the background-position attribute at the same time; And so, jwTextureSwim was born.
jwTextureSwim is a jQuery plugin that lets you animate background textures. With some easy setup and little creativity, you can create some very interesting effects.
Like any other plugin, you first start by downloading a jQuery version (1.11.3) and the jwTextureSwim .js file (also in minified format). You can compile the .js files yourself via the direct-link or you can download the full .zip file that contains everything already set up for you. Use it to follow along and then use it for your own website!
As always, it starts with HTML and linking to your sources. You can optionally link to my CSS or include your own.
While you're at it, include a div that has the background texture you want to animate. (If you are using my
follow-along.html file or included my CSS, adding the class .checker will add a texture to your div.)
<!DOCTYPE HTML>
<html lang="en">
<head>
<!-- Optional. You can include your own -->
<style rel = "stylesheet" href = "css/jwtextureswim.css"></style>
</head>
<body>
<!-- Make sure your DIV has a background texture -->
<div class="checker">jwQuakeText</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jwtextureswim-1.0.js"></script>
</body>
</html>Once your element is setup and has a background texture, animate the texture by targeting the container in the <script> section:
<script type = "text/javascript">
$(".checker").textureSwim();
</script>...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?
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>
// ScriptsAnd 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...
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>
// ScriptsNext, 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>There are a few options that you can set will change the way the background swims. You've already seen distance in action, but here are some others:
IN:distanceX - int - Number of pixels the texture will swim (horizontally) in one cycle. Default: 500
Note: Pass a negative number to go left.distanceY - int - Number of pixels the texture will swim (vertically) in one cycle. Default: 0
Note: Pass a negative number to go up.duration - int - Milliseconds - The amount of time it will take the texture to move "distance" pixels. Default: 5000 delay - int - Milliseconds - The time delay after each animation is complete.ease - string - The easing function to use to animate. Default: Linear. Try passing an empty string...repeat - int - Number of times the function should repeat. Default: -1 (Infinitely)elements - The element(s) that envoked the function (for chaining).
<div id = "mountain"> <div id = "snow"> Get Creative. </div> </div>
$("#mountain").textureSwim({
duration: 20000
});
$("#snow").textureSwim({
distanceX: 3000, distanceY: 700, duration: 2000
});
<div id = "mountain-bright"> <div id = "rain"> Get Creative. </div> </div>
$("#mountain-bright").textureSwim({
duration: 20000
});
$("#rain").textureSwim({
distanceX: 5000, distanceY: 2700, duration: 200
});
.stop() on the element.
If you want to make changes to jwTextureSwim, you can fork the plugin on Github. If you have questions or feature requests, you can reach me on JWorksStudios.com, twitter/@JWorksStudios, or g+/JWorksStudios.