Fade in on page load

You don't need jQuery to do that just CSS animations e.g

#page {
    -webkit-animation: fadein 2s;
            animation: fadein 2s;
}

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

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

hi david,

thats simply great. didnt knew that filter by now to be honest - even better without jquery :)

big thanks into the indian summer.

You're welcome

This last CSS animation from David works perfectly. Thanks for that!

Is it possible to have this effect occur to each segment of a page, only when it comes into view?
I.e. once I scroll down to the next segment this fadein occurs and not for the entire page upon loading?

Thanks,

Marnix

Hi Marnix,

As this topic is pretty old, can you open a new topic?

We'll make sure to address your concerns there. Thank you. :)

Yes I will make another one Elvin. Thanks.

Hi, I used the visual editor to build out my footer. How would I add the jquery script to the footer to fade in all the content? I am having issues.

Hi, I am using the visual editor to build the footer. How would I add the jquery to the hook? I tried creating a new wp_footer and added the jquery and css to the customizer but the entire website went blank. Any help is greatly appreciated. Here is the url: emeraldgroupusa.com

Hey, I tried the codes above but it completely made my page blank. I want the content to fade in or slide in when someone is scrolling through the page. Any help? I am a beginner to coding.

Hi EJ,

Can you open up a new topic? So you could use the private information text field to provide the site details for us to check. Thank you.