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 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(document).ready( 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.
The following users have thanked you: David Goode, Reggie Simmons