Fade in on page load

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 :)

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

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

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

Fade out is kinda different, it requires Javascript.

It's actually out of the scope of GP :P

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!