jwTextureSwim is a jQuery plugin for animating background textures. With minimal effort, you can spice up the texture of a static background.
It works best with smooth textures, but with some creativity, you can do cool things with just a little bit of code.
How to make use of it:
1. Load the jQuery jwtextureswim plugin after the jQuery library.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="jwtextureswim-1.0.js"></script>
2. Add a background image to your container.
.demo { ... background-image: url(bg.png); ... }
3. Move the background image.
$(".demo").textureSwim(/*OPTIONS*/);
4. Override the default background image animation options.
// Number of pixels the texture will swim (horizontally) in one cycle. // Note: Pass a negative number to go left. distanceX : 500, // Number of pixels the texture will swim (vertically) in one cycle. // Note: Pass a negative number to go up. distanceY : 0, // The time delay after each animation is complete. delay : 0, delayAfter : 0, // The amount of time it will take the texture to move "distance" pixels. duration : 5000, // The easing function to use to animate. ease : "linear", // Number of times the function should repeat. repeat : -1, // Whether or not to stop the swim. // Note: You can also just call .stop(); stop: false
jquery to animate background images, jwtextureswim Plugin/Github
See Demo And Download
Official Website(jworksstudios): Click Here
This superior jQuery/javascript plugin is developed by jworksstudios. For extra advanced usage, please go to the official website.