[Support request] Fade in on page load

[Klaus]

I followed Davids advice in this post:

https://generatepress.com/forums/topic/fade-in-on-page-load/page/2/

So I created this fade-in effect of the page content. On top of the page is a page-hero (a block-element hooking “after_navigation”). I would like to fade in that element as well. How could this be done?

[Ying]

Hi Klaus,

You could change this CSS:

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

To this:

#page, nav#site-navigation + .gb-container {
    -webkit-animation: fadein 2s;
            animation: fadein 2s;
}

Let me know how it works 🙂

[Klaus]

Hello Ying,

thanks, that works perfectly.

I have another question, concerning the pagehero: how could I make it fade-out, when navigating on my site. I would like to fade-out the page-hero on click and fade-in the pagehero of the next page or post. Fading-in now works, but how to fade-out (only the pagehero). Regards Klaus

[Klaus]

But, but… I found a problem with the new css. Everything works fine, but when I scroll up (after scrolling down first), then the pagehero fades one more time when the sticky-“navigation as header” turns into the primary navigation(-as-header). I can understand why this happens, but I would like to turn off this effect here (no fading-in) when scrolling up. (When I turn off the sticky-navigation, then of course everything is o.k.). Sorry to bother you with this…. Klaus

[Klaus]

Ah, here is the answer: I deleted this part of the css:

“nav#site-navigation + ”

and now it works.

So I wonder if this fading-out idea could work. But it already looks awesome.

Klaus

[Ying]

Fade out is kinda different, it requires Javascript.

It’s actually out of the scope of GP 😛

You could give this a try, create a new hook element, add the JS in, choose wp_footeras hook, entire site as location.

<script type="text/javascript"> 
$('a').click(function(e) {
e.preventDefault();
newLocation = this.href;
$('body').fadeOut('slow', newpage);
});
function newpage() {
window.location = newLocation;
}</script>

Hope it works!

[Author]

Posts