Fork me on GitHub

Cascade Lines

jQuery Plugin for change background color with cascading lines transition.


How to use?

Copy jQuery and Cascade Lines files to your folder.

<script src="jquery.js"></ script>
<script src="cascadelines.js"></script>


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


  • 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


<script src="jquery.js"></ script>
<script src="cascadelines.js"></script>
        color: '#00F',
        direction: 'bt',
        lines: 50,
        speed: 220,
        zindex: 0

  #mydiv {
    background-color: #0F0;
    position: relative;
    height: 200px;
    width: 300px;

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