Archived topic

Page Fade

3 replies · Started by David on June 20, 2022

Viewing posts 1–4 of 4

June 20, 2022 at 2:01 am #2258584

Hello,

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');
    });

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

June 20, 2022 at 4:27 am #2258736

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;
}

June 20, 2022 at 4:29 am #2258739

Perfect - thanks David

June 20, 2022 at 5:23 am #2258796

You're welcome

This archived topic is closed to new replies.