CODEWITHSUNDEEP
jqueryhtmlcss
bntrns
bntrns

Reputation: 452

Image fade out on landing

I want to have a full screen image appear when a user visits a site, then after a delay it fades out and reveals the website. I know this can probably be done through jQuery. Does anyone know of a good resource or code snippet for this? Thanks!

Upvotes: 0

Views: 1071

Answers (1)

frenchie
frenchie

Reputation: 51937

Let's say your image is in div TheIntro and the site is wrapped in a div called TheMainDiv, then you could use jquery for this:

$(document).ready(function () {

    $('#TheIntro').animate({opacity: 0.01}, 500, function () {

        $(this).hide();
        $('#TheMainDiv').fadeIn(500);             

    });   
});

I don't think you need a plugin for that effect. The first value of 500 is the time it takes for the intro image to fade out and the second value is for the time it takes for the site to fade in.

Upvotes: 1

Related Questions