[Resolved] Page Fade

[David]

Hello,

I came across this on the support posts which is great…
https://generatepress.com/forums/topic/fade-in-on-page-load/

And I have used the code

body {
    opacity: 1;
    transition: 1s opacity;
}
body.fade-out {
    opacity: 0;
    transition: none;
}

document.body.className += ' fade-out';

jQuery(function() {
        jQuery('body').removeClass('fade-out');
    });

It is working here…
http://shalayogahaven-co-uk.stackstaging.com/

How do I get it to only fade the page content and not the header – I’ve tried changing body to main on both the css and jquery, but no luck.

Thanks
Dave

[David]

Hi there,

so the jQuery can remain as is. And you can adapt the CSS to target an element inside the body

body .site {
    opacity: 1;
    transition: 1s opacity;
}
body.fade-out .site {
    opacity: 0;
    transition: none;
}

[David]

Perfect – thanks David

[David]

You’re welcome

[Author]

Posts