How to add animated background

this is a snippet for the child-theme functions.php.
Take this code: https://kriesi.at/support/topic/animated-js-color-background-in-color-sections/#post-530485
as you can see inside the code: the selector where this background is applied is: #gradient
so if you have a color-section and goto advance tab you see the “Custom ID Attribute” input field – insert : gradient

thats it.

PS : it is possible without child – but more complex.

but btw: i see there is a syntax error in the css setting :

$('#gradient').css({
	   background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({
	    background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"     });

it works because the -moz-linear-gradient is working – but the first background couldn’t work.

this is better:

$('#gradient').css({
	"background" : "-webkit-linear-gradient(to left, "+color1+" 0%, "+color2+" 100%)",
	"background" : "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)",
	"background" : "linear-gradient(to left, "+color1+" 0%, "+color2+" 100%)",
});

you can change it to diagonal :

$('#gradient').css({
   "background": "-webkit-linear-gradient(to top right, "+color1+" 0%, "+color2+" 100%)",
   "background": "-moz-linear-gradient(to top right, "+color1+" 0%, "+color2+" 100%)",
   "background": "linear-gradient(to top right, "+color1+" 0%, "+color2+" 100%)",
});

the background without double quotes is ok – and will work too – but this is more proper with quotes.
the comma on the last background is not needed – but looks better – not necessary
but the second .css in the rules is nonesense

• This reply was modified 3 years, 7 months ago by Guenni007.