Download here: https://sourceforge.net/projects/dynamicgradient/files/
Here’s a brief usage guide on the Gradient Header object…
This JavaScript object really just draws a whole bunch of lines. I’m using this as a dynamic background for the headers and footers on the blog portion of the site. It utilizes the canvas tag which has been supported for the past few years by most major browsers and almost all of the new webkit derived smart-phone browsers (Androids and iPhones naturally). If you want to use this for a site header, as I have, I’d recommend also forcing the scrollbar to always load with the page, otherwise the dynamically rendered canvas object might give your layout a black eye. For mobile devices, a more graceful solution may be needed.
If the destination object has an explicitly set width in its style attribute, the GH object will use that. If not, the GH object will use the width of the browser window and in the event of a resize, the width of the GH will be adjusted. Of course this doesn’t work on Internet Explorer, so I wrote the code to “degrade” rather than try to mimic functionality. Maybe I’ll readdress this once IE9 rolls out.
All of the various parameters are listed in the JavaScript file, but here’s a couple examples to get you started:
Example 1:
// <div id="gradExample1" style="width: 300px; height: 50px; border: 1px solid;"><div>
var gradExample1 = new GradientHeader('gradExample1',
{ 'lineStartColor' :'#CBBC6C',
'lineEndColor' : '#FFFFFF',
'lineFinalColorStop' : 1,
'height' : 40,
'lineWidth' : 1,
'gutter' : 4
});
Example 2:
// <div id="gradExample2" style="width:300px; height: 50px; border: 1px solid;"></div>
var gradExample2 = new GradientHeader('gradExample2',
{ 'drawBackground': true,
'invert': true,
'lineStartColor' :'#FFFFFF',
'lineEndColor' : '#CBBC6C',
'backStartColor' : '#FFFFFF',
'backEndColor' : '#CBBC6C',
'backPercent' : .5,
'lineFinalColorStop' : 1,
'height' : 50,
'lineWidth' : 1,
'gutter' : 1
});
Note that setting the ‘invert’ flag will change the direction of the lines to start from the bottom and move upwards. Also by default, the background gradient won’t be drawn to the page.
