While I have some knowledge of CSS and various JavaScript libraries, I've encountered difficulty in integrating multiple backgrounds into the code that I found on this link: http://codepen.io/quasimondo/pen/lDdrF. My goal was to overlay a transparent .png onto the animated gradient.
I attempted attaching the png to different sections of the website (body, div), but it did not work as expected, resulting in loss of control. Whenever I try adding to the $('#gradient').css function, an error occurs. It seems like a simple syntax issue, but I'm unsure.
Thank you for taking the time to look at my post. This is my first one, and I did browse through previous posts. Apologies if I missed something.
- Jason
HTML
<!DOCTYPE html>
<title>Animated Background Gradient</title>
<body>
<div id="gradient" />
</body>
<script src="js/index.js"></script>
CSS
body{
background-color: #000000;
padding: 0px;
margin: 0px;
}
#gradient {
width: 100%;
height: 800px;
padding: 0px;
margin: 0px;}
JS
var colors = new Array(
[62,35,255],[60,255,60],[255,35,98],[45,175,230],[255,0,255],[255,128,0]);
var step = 0;
var colorIndices = [0,1,2,3];
var gradientSpeed = 0.0006;
function updateGradient()
{
if ( $===undefined ) return;
var c0_0 = colors[colorIndices[0]];
var c0_1 = colors[colorIndices[1]];
var c1_0 = colors[colorIndices[2]];
var c1_1 = colors[colorIndices[3]];
var istep = 1 - step;
var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
var color1 = "rgb("+r1+","+g1+","+b1+")";
var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
var color2 = "rgb("+r2+","+g2+","+b2+")";
$('#gradient').css({
background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+")"}).css({
background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});
step += gradientSpeed;
if ( step >= 1 )
{
step %= 1;
colorIndices[0] = colorIndices[1];
colorIndices[2] = colorIndices[3];
colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
}
}
setInterval(updateGradient,10);