|
Answer» Is there any way I can make a background with javascript that would look LIKE this:
I've made this with photoshop but when I want to add it to my site, it doesn't give the effect I want.
I would like to have that effect over the complete site, not repeated.
Is there anyone who knows how to do that?
Cause I can't wright java.
Thanks in advance
Jonas No need to double post..... I wasn't suppost to be a double post, I just hoped to find some guys over here who could wright javascript.
But if I'm double posting, feel FREE to remove it
I've found this here
Code: [Select]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="en" />
<title>Gradient Background</title>
<style type="text/css">
body {
padding: 0px;
margin: 20px;
background-color: #00CCFF;
}
#fadeBandsV {
position: absolute;
left: 0px;
TOP: 0px;
width: 100%;
height: 80px;
z-index: 1;
}
#fadeBandsH {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
z-index: 1;
}
#fadeBandsV div {
overflow: hidden;
position: absolute;
width: 100%;
}
#fadeBandsH div {
overflow: hidden;
position: absolute;
height: 200px;
}
#pageContent {
position: relative;
z-index: 2;
}
</style>
<script type="text/javascript">
<!--
// do not call this function directly - use createGradientV or createGradientH instead
function createGradient(direction, args) {
var bandSets = args.length / 4;
var startPos = 0;
for (var bandSetLoop=0; bandSetLoop<bandSets; bandSetLoop++) {
fadeFromColour = args[bandSetLoop * 4];
fadeToColour = args[bandSetLoop * 4 + 1];
bandSize = args[bandSetLoop * 4 + 2];
fadeSteps = args[bandSetLoop * 4 + 3];
// calculate stepped colour values for each band
var colourSteps = [fadeFromColour.concat()]; // ensure first colour is the start colour
for (var bandLoop=1; bandLoop<fadeSteps; bandLoop++) {
colourSteps[bandLoop] = [];
for (var rgbLoop=0; rgbLoop<3; rgbLoop++) {
colourSteps[bandLoop][rgbLoop] =
Math.round(colourSteps[bandLoop-1][rgbLoop] + ((fadeToColour[rgbLoop] - colourSteps[bandLoop-1][rgbLoop]) / (fadeSteps - bandLoop)));
}
}
// now draw each band
if (direction == 'V') {
for (var bandLoop=0; bandLoop<fadeSteps; bandLoop++) {
document.getElementById('fadeBandsV').appendChild(aDiv = document.createElement('div'));
aDiv.style.height = bandSize + 'px';
aDiv.style.top = startPos + (bandSize * bandLoop) + 'px';
aDiv.style.backgroundColor = 'rgb(' + colourSteps[bandLoop][0] + ',' + colourSteps[bandLoop][1] + ',' + colourSteps[bandLoop][2] + ')';
}
} else {
for (var bandLoop=0; bandLoop<fadeSteps; bandLoop++) {
document.getElementById('fadeBandsH').appendChild(aDiv = document.createElement('div'));
aDiv.style.width = bandSize + 'px';
aDiv.style.left = startPos + (bandSize * bandLoop) + 'px';
aDiv.style.backgroundColor = 'rgb(' + colourSteps[bandLoop][0] + ',' + colourSteps[bandLoop][1] + ',' + colourSteps[bandLoop][2] + ')';
}
}
startPos += fadeSteps * bandSize;
}
}
// createGradientV - creates a vertical gradient (North to South)
// Parameters: createGradientV takes a single set, or multiple sets of, 4 arguments:
// argument 1: fadeFromColour = an array of R,G,B colours to fade from (for example, [0, 0, 255] == #0000FF)
// argument 2: fadeToColour = an array of R,G,B colours to fade to (for example, [0, 204, 255] == #00CCFF)
// argument 3: bandHeight = height of each colour band
// argument 4: fadeSteps = number of colour bands used for the gradient (should be at least 2)
function createGradientV() {
if (arguments.length < 1 || arguments.length % 4 != 0) {
alert('Incorrect usage. Number of parameters must be a multiple of 4!');
return;
}
createGradient('V', arguments);
}
// createGradientH - creates a horizontal gradient (West to East)
// Parameters: createGradientH takes a single set, or multiple sets of, 4 arguments:
// argument 1: fadeFromColour = an array of R,G,B colours to fade from (for example, [0, 0, 255] == #0000FF)
// argument 2: fadeToColour = an array of R,G,B colours to fade to (for example, [0, 204, 255] == #00CCFF)
// argument 3: bandHeight = height of each colour band
// argument 4: fadeSteps = number of colour bands used for the gradient (should be at least 2)
function createGradientH() {
if (arguments.length < 1 || arguments.length % 4 != 0) {
alert('Incorrect usage. Number of parameters must be a multiple of 4!');
return;
}
createGradient('H', arguments);
}
function drawGradient() {
createGradientV([255, 0, 0], [255, 255, 0], 3, 50, [255, 255, 0], [0, 0, 255], 3, 50, [0, 0, 255], [0, 204, 255], 3, 50);
createGradientH([255, 0, 0], [255, 255, 255], 3, 50, [255, 255, 255], [0, 0, 255], 3, 50);
}
//-->
</script>
</head>
<body ONLOAD="drawGradient();">
<div id="fadeBandsV"></div>
<div id="fadeBandsH"></div>
<div id="pageContent">
<h1>A test heading</h1>
</div>
</body>
</html>
But I can't seem to find witch part I need to use and stuff, normally I'm pretty good in studying a prog language and use the parts I want and tweak them but this is a bit to hard for me.
Anyone who can help me?
Jonas Can you edit your last post there PLEASE..... oh srry, didn't notice it
Is it good like that?
I'm afraid it will be harder to read if I add more enters
Jonas
|
