Animated (js) color background in color sections

Hi everyone;

I – MY OBJECTIVES
I try to customize a color section or a div using an animated backgound gradient after having seen this very interesting and beautiful “animated background gradient” pen project here:
http://codepen.io/quasimondo/pen/lDdrF
It perfectly fit one client’s request.
I though it would be easy. For me it seems to be not.

II – CONTEXT & SKILLS
– I am using a Child Theme
– my .js skills are not excellent (
– so… I am missing something that might be very simple

III – HOMEWORK (HW) prior asking questions here
HW1 – studied Topics “Where is the custom.js file” available from here
https://kriesi.at/support/topic/where-is-the-custom-js-file/
HW2 – studied Topic Custom .js
https://kriesi.at/support/topic/custom-js/
HW3 – studied Topic “How To Add Custom Jquery to Enfold Theme”
https://kriesi.at/support/topic/how-to-add-custom-jquery-to-enfold-theme/

IV – WHAT I DID AND HOW
1 – created a color section with the following Section ID name : gradient
2 – I created a /js/ folder in the Child Theme folder
3 – I added a custom.js file in which I cut-n-pasted the .js code found on the pen website
4 – I used WP’s “Editor” to edit the child theme’s functions.php files, adding the following code:

function enqueue_custom_js() {
	wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/js/custom.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_js' );

5 – For the sake of completeness, my custom.js file contains the code cut and pasted from the pen reference file sourced above (“OBJECTIVES”):

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.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 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);

6 – in the custom (quick) css, I defined add the following css

#gradient
{
  width: 100%;
  height: 400px;
  padding: 0px;
  margin: 0px;
}

RESULT
Alas, the Color Section does not display the animated background sought for… :((((((((((

Can anybody help? in advance of the landing, thank you.

• This topic was modified 9 years ago by Alexoidea. Reason: Custom css is #gradient and NOT #newgradient