Fade In Page Body Without Flicker

A nice and easy fade in script for your shiny website. Give it a spin!

Add CSS

html {
    background-color: #111;
}

body {
    opacity: 1;
    transition: 1s opacity;
}

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

Add just after the open <body> tag

<script>document.body.className += ' fade-out';</script>

Add just before the closing </body> tag

<script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
<script>
$(function() {
    $('body').removeClass('fade-out');
});
</script>

Thanks for reading. x

Resources

• jQuery: https://jquery.com