Fade In Page Body Without Flicker

in #html • 6 years ago

GpJHIkX.png


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

#css #jquery #tutorial #fade
6 years ago in #html by
$0.00
    2 votes
    Reply 1
    Sort:  
  • Trending
    • [-]
     6 years ago 

    Congratulations @impshum! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

    You distributed more than 50 upvotes. Your next target is to reach 100 upvotes.

    You can view your badges on your Steem Board and compare to others on the Steem Ranking
    If you no longer want to receive notifications, reply to this comment with the word STOP

    To support your work, I also upvoted your post!

    Vote for @Steemitboard as a witness to get one more award and increased upvotes!
    $0.00
      Reply