Cascade Lines

jQuery Plugin for change background color with cascading lines transition.

Demo

How to use?

Copy jQuery and Cascade Lines files to your folder.

<script src="jquery.js"></ script>
<script src="cascadelines.js"></script>
<script>
	$("body").cascadelines();
</script>

Notice

If you want use plugin with divs, you must first set up position style of div (like absolute, relative, fixed)!

Parametrs

  • Color - set new color in hex of background, default is "#00F"
  • Direction - set direction of transition ("lr", "rl", "tb", "bt"), default is "lr"
  • Lines - set numbers of lines used in transition, default is 10
  • Speed - set speed of transition, default is 100
  • Zindex - set z-index for object used in transition, default is 0
  • Callback - call function when done

Example

JSFiddle 
<script src="jquery.js"></ script>
<script src="cascadelines.js"></script>
<script>
  $("#mydiv").cascadelines({
        color: '#00F',
        direction: 'bt',
        lines: 50,
        speed: 220,
        zindex: 0
  });
</script>

<style>
  #mydiv {
    background-color: #0F0;
    position: relative;
    height: 200px;
    width: 300px;
  }
</style>

<div id="mydiv"></div>

Links

Download Zip
View on Github

Author

Maciej Kawa

kontakt @ maciejkawa.lubin.pl