Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1294609

    Hey guys, first of all thank you very much for you great support.

    I found this solved thread:https://kriesi.at/support/topic/animated-js-color-background-in-color-sections/

    I have no idea how to copy this.

    Can someone please help me with a step by step manual?

    Thank you!

    #1294613

    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.

    #1294614

    Thought it was more difficult:)

    Thanks so much!
    Works perfect!

    #1294640

    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, 1 month ago by Guenni007.
    #1294748

    Wow, thanks so much. You are awesome!

    Btw: You said that I can change it to top left to bottom right. But you inserted the same code.

    #1294828

    Is it possible to connect it with several color sections on one page?

    Currently it works only with one object.

    #1294848

    sorry – you can see how gradient are made f.e. here: https://www.cssportal.com/css-gradient-generator/
    the code you got there is meant for css like quick css. If you like to define a color via script you can do that via:

    element.css( "color", "#333");
    or if you have more than one attribute:

    element.css({ 
    	"color" : "#333",
    	"background-color" : "#900",
    	"display": "block" ,
    });

    so for script you have to replace in the markup you got there https://www.cssportal.com/css-gradient-generator/
    f.e:

    background: #121FCF;
    background: -webkit-linear-gradient(to top right, #121FCF 0%, #CF1512 100%);
    background: -moz-linear-gradient(to top right, #121FCF 0%, #CF1512 100%);
    background: linear-gradient(to top right, #121FCF 0%, #CF1512 100%);

    to:

    "background": "#121FCF",
    "background": "-webkit-linear-gradient(to top right, #121FCF 0%, #CF1512 100%)",
    "background": "-moz-linear-gradient(to top right, #121FCF 0%, #CF1512 100%)",
    "background": "linear-gradient(to top right, #121FCF 0%, #CF1512 100%)",

    now you only have to replace the static colors with the script calculated
    and because it is a script variable you had to interrupt the html markup (close doubel qoute – insert script calculated values ( “+color1+” and “+color2+” ) – and open again the html markup. ( :lol: it is javascript crispr ;) )

    now there is :

    "background": "#121FCF",
    "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%)",
    #1294897

    Thank you, sir!

    #1295035

    Hey Moescube,

    Did you need additional help with this topic or shall it be closed?

    Best regards,
    Jordan Shannon

    #1295037

    I’m fine. Thanks a lot.

    #1295101

    Hi Moescube,

    We’re glad to hear that :)
    Thanks for using Enfold and have a great day!


    @Guenni007
    Thanks for helping out :)

    Best regards,
    Nikko

Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘How to add animated background’ is closed to new replies.