Welcome Guest! Login
0 items Join Now

How to make pages fade in on load in Gantry 5

    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 98615
    • Thanks: 13111
    • Web Designer/Developer

    How to make pages fade in on load in Gantry 5

    Posted 4 years 6 months ago
    • A couple of members have asked if they can make their pages fade in (like we used to have in Gantry 4 templates) - the answer is yes, it's very simple to do.

      All you need is one little piece of CSS to hide the body of your page straight away...

      ... and then one tiny piece of JQuery to fade the body in after the page has completely loaded.

      See my screenshot below for Kraken as an example of this.

      In case the code is hard to read the CSS is:
      #g-page-surround {opacity:0; transition: opacity .5s ease-in-out;}

      and the jQuery is:
      jQuery(window).load( function() {
           jQuery("#g-page-surround").css({ opacity: 1 });

      Please make sure that you get the priorities of load correct too - "10" for the CSS so it loads first and "-10" for the jQuery so it loads last (and also it put at the bottom of the page html).

      Regards, Mark.
    • Last Edit: 4 years 6 months ago by MrT.
    • The following users have thanked you: David Goode, Reggie Simmons

    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.

Time to create page: 0.104 seconds