I'm still getting the hang of HTML, JavaScript, and CSS but I recently made some changes to someone else's code to animate a gradient. The original code used background: rgb, but I switched it to background: rgba. It seems to be working fine, but now I can't seem to get the opacity to show up in the gradient.
Does anyone know how I can add opacity to the gradient as well?
The code behaves differently here compared to Chrome, so I'm trying to figure out where the issue lies.
JS
var colors = new Array(
[62,35,255,0.5],
[60,255,60,0.5],
[255,35,98,0.5],
[45,175,230,0.5],
[255,0,255,0.5],
[255,128,0,0.5]);
var step = 0;
//color table indices for:
// current color left
// next color left
// current color right
// next color right
var colorIndices = [0,1,2,3];
//transition speed
var gradientSpeed = 0.002;
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 a1 = Math.round(istep * c0_0[3] + step * c0_1[3]);
var color1 = "rgba("+r1+","+g1+","+b1+","+a1+")";
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 a2 = Math.round(istep * c1_0[3] + step * c1_1[3]);
var color2 = "rgba("+r2+","+g2+","+b2+","+a2+")";
$('#colorstrip').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];
//pick two new target color indices
//do not pick the same as the current one
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);@import url('https://fonts.googleapis.com/css?family=Pangolin');
/*Hoofdpagina.html styles*/
#colorstrip{
width: 100%; height: 6%;
position: fixed;
top: -5px;
left:0;
background-color: rgba(10,10,10,0.5);
border-bottom-right-radius: 5%;
border-bottom-left-radius: 5%;
}
#colorstrip:hover{
background-color: rgba(207, 254, 255, 0.9);
}
body{
background: url('images/Farm background.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
background-blend-mode: darken;
}
nav{
width: 80%;
}
nav ul{
text-align: center;
margin: 0 10% 0 0;
padding-left: 0;
}
nav ul li{
width: 25%;
float: left;
}
/*Styles for everything in <a>*/
nav ul li a{
list-style-type: none;
text-decoration: none;
letter-spacing: 1px;
font-size: 33px;
opacity: 0.75;
filter: alpha(opacity=50);
font-family: 'Pangolin',cursive;
color: #000000;
-o-transition: .2s;
-moz-transition: .2s;
-webkit-transition: .2s;
transition: .2s linear;
}
/*<a> hovering makes some changes*/
nav ul li a:hover {
color: #279afe;
font-size: 36px;
text-shadow: 1px 3px rgba(0,0,0,0.3);
}
ul{
list-style-type: none;
text-decoration: none;<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://use.fontawesome.com/4f69f01663.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="Gradient.js"></script>
<script src="gradient.css"></script>
<link rel="stylesheet" media= "screen" href="styles.css">
<link rel="icon" href="images/Cocky%20af.png">
<title>Cocky Clicker</title>
</head>
<body>
<div id="colorstrip"/>
<nav>
<ul>
<li><a href="Hoofdpagina.html"><i class="fa fa-home" aria-hidden="true"></i>Mainpage!</a></li>
<li><a href="Clickers.html"><i class="fa fa-gamepad" aria-hidden="true"></i>Play!</a></li>
<li><a href="Information.html"><i class="fa fa-address-book" aria-hidden="true"></i>About!</a></li>
<li><a href="Contact.html"><i class="fa fa-address-card" aria-hidden="true"></i>Contact us!</a></li>
</ul>
</nav>
</body>
</html>