[Resolved] Fade in on page load

[David]

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; }
}

[dasigna]

hi david,

thats simply great. didnt knew that filter by now to be honest – even better without jquery 🙂

big thanks into the indian summer.

[David]

You’re welcome

[Marnix]

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

[Elvin]

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. 🙂

[Marnix]

Yes I will make another one Elvin. Thanks.

[EJ]

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.

[EJ]

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

[EJ]

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.

[Elvin]

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.

[Author]

Posts