Streaming live at 10am (PST)

Trouble using custom code in a section on my website


#1

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)


#2

@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:


#3

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!


#4

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.


#5

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


#6

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?”


#7

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.


#8

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!


#9

Glad that I could help!


#10

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