Trouble using custom code in a section on my website

Hey guys,

Im trying to use a custom gradient animation from codepen for my hero section. (https://codepen.io/anon/pen/oePbrK)
Ive never used custom code before and I have no clue where to start :frowning:

Here is my public share link: LINK
(how to access public share link)

@Teamsieo put the js portion of code from Codepen into the <head> section of the page you wish to have the gradient. Set the hero section to have id=gradient and add <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"> to the before the</body> section of the page.

Like so:

Hey bbrazis!!

Thanks a ton for getting back to me! I tried the steps you outlined and I think I messed up somewhere along the way.

I put the JS code in the head section on my homepage where I want the gradient to affect the hero section
like so: (nvm the highlighting)

Im not sure where to give the hero section the id=gradient tag though?

can you clarify this?

Thanks so much for your help!

Looks like you didn’t put the custom code in <script></script> tags.

Here is where you would assign an ID for an element.

49 AM

Hope that helps.

Woo it works!! You’re the man! Thanks so much for your help :slight_smile:

One last question! How can I apply that id=gradient to multiple sections on my page? I tried and got the “this id is already taken error?”

Normally you wouldn’t be able to do that, so instead of having the script look for an ID we can have it look for a class instead.

So make a gradient class and apply it to the elements you want the gradient to appear.

Change the JS code to search for a class instead of an ID:
Which is accomplished by changing the:

$(‘#gradient’).css({

to

$(‘.gradient’).css({

The # into a .

You can paste this into the script tags for your page and it should work. Or you could simply change the # into a . like I mentioned before.

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;
//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.001;
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];
//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);

Hope this all makes sense.

Once agian…YOU ARE THE MAN. I get it now, thanks alot for your help!

Check back in a week or so to see what you helped create! sieo.io

Thanks again man!

Glad that I could help!

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.