Fading in page on load

javascript jquery css fade

23,421

Solution 1

body behaves funny. You would need to wrap the contents of the entire page in another div and fade that in.

<body>
    <div id="wrapper">
        # Page Contents #
    </div>
</body>

CSS:

#wrapper{
    background-image:url('some-image.jpg');
    display:none;
}

jQuery:

$(document).ready(function(){
    $('#wrapper').fadeIn();
});

See this JSFiddle.

Solution 2

Like the @ITFarmer wait, you can do it in CSS3, but you could probably also animate the background-image with CSS3 too.

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeinbg {
    from {
        background-image: none;
    }
    to {
        background:url('body.png') no-repeat;
    }
}

.container {
    animation: fadein 2s;
}

.body {
    animation: fadeinbg 2s;

23,421

Author by

Sam Friday Welch

Updated on January 11, 2020

Comments

Sam Friday Welch over 4 years
I am trying to use j-query to fade in my pages body upon load, however for some reason the body's background image is not being affected by the j-query. Please see the code I have below:

J-Query Code in head section:
```
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$('body').fadeIn(2000);
});
</script>
```
CSS Code:
```
body
{
overflow:hidden;
background:url('body.png') no-repeat;
background-size:100%;
display:none;
}
```
Everything contained within the body (div's / paragraphs / headings etc) fade in on load as per the j-query code, however the body's background image (body.png) loads instantly with the page. Please can anyone suggest what I'm doing wrong with the above code?
Sam Friday Welch over 10 years

Thanks for this, i'll go ahead with the wrapper idea. Cheers
Sam Friday Welch over 10 years

thanks for this - the body background image still loads instantly, but its good to know that the fade funtiopn is achievable using key-frames as well as Jquery :-)
Jayden Lawson over 7 years

JSFiddle link broken
Robbie Wxyz over 7 years

@JaydenLawson hey, thanks man! I'd changed my username, but it's back to working now.
Jayden Lawson over 7 years

No worries Robbie Wxyz! Great work on fixing so quick :)