Fade from page to page + loading bar

[grimski]

I might be being draft but I can’t seem to find any tutorials/examples of the effect I’m trying to create – even though it seems quite common.

Basically when you click the websites navigation/internal links the fade should quickly fadeout and into the next page. While that happens there should be a bar that ‘grows’ at the top of the screen until it’s 100% and the new page is shown. I can’t seem to find anything that has these two effects together.

Some examples I’ve found are:

1. https://grainandmortar.com
2. http://www.hochburg.net

I also found a plug-in called pace.js. It doesn’t do the fade out/in but I thought it was worth noting incase anyone has experience with it: http://github.hubspot.com/pace/docs/welcome/

I know it’s a bit superficial but it’s for a portfolio site so sometimes it’s quite nice to put these little effects in.

Hope someone can help me out with this. Cheers!

[grimski]

I’ve come up with a solution for this so I’d be interested in getting your thoughts. I decided on using pace.js.

I made a CodePen but for some reason it doesn’t work …maybe it’s to do with how the script is fired and it won’t work within CodePen? Anyways, I’ll explain what I’ve done below and here’s the pen to be used for reference: http://codepen.io/moy/pen/MJBPZE

All my content is contained within a .page div. So I decided to set the opacity of this to zero. Once pace.js has ran it adds a class of .pace-done to the body tag. When that’s added I change the opacity and add a transition, like below:

/**
 * When pace.js is running we add `opacity` to the `body` element so we can fade
 * the page in with a transition once it's loaded.
 */

.page {
    opacity: 0;

    .pace-done & {
        opacity: 1;
        transition: opacity .5s ease;
    }

    .no-js & {
        opacity: 1 !important;
    }
}


/**
 * Progress bar styles.
 */

.pace {
  pointer-events: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
    background: $color-primary;
    height: 4px;
    position: fixed;
    top: 0;
    right: 100%;
    width: 100%;
    z-index: 2000;  
}

One concern I have with that code is that if the javascript doesn’t fire, the page will be stuck on opacity: 0. I’ve tried to counter this by using the .no-js on the body – which is stripped off when javascript runs. But I suppose it would be an issue if the pace.js script doesn’t fire. There is a .pace-running class but when I targeted that often you would see a glimpse of the content before the script kicked and it would disappear before it faded in.

Not a massive deal but I thought it would be nice to have the page fade out slightly after clicking a link. Does anyone see any big issue with the following JS:

$(document).ready(function() {

    //$('body').css('display', 'none');
    //$('body').fadeIn(200);

    $('a:not(.page-head__toggle)').click(function() {
        event.preventDefault();
        newLocation = this.href;
        $('body').fadeOut(150, newpage);
    });

    function newpage() {
        window.location = newLocation;
    }
});

One concern I had is it’s looking for any link on the page with the exception of .page-head__toogle – is that going to be a massive resource hog? I suppose I could just target the main nav items and buttons with a certain class – but it could be a pain to get people to remember to add it when writing articles for example.

Thanks, hopefully look forward to some feedback! :)

[Shikkediel]

Fade won’t work because the event parameter is missing:

$('a:not(.page-head__toggle)').click(function(event) {

Still looking at the rest but pace.min.js apparently gets blocked because of some MIME type mismatch…

looking for any link on the page

Unless there’s thousands, I don’t think that should be an issue.

Not sure how the page will look when using the back button by the way, you might want to show it again after redirecting:

function newpage() {
  window.location = newLocation;
  $('body').show();
}

[Shikkediel]

One concern I have with that code is that if the javascript doesn’t fire, the page will be stuck on opacity: 0.

You could use a noscript fallback for that:

<head>

[basic stylesheet]

<noscript>
<style>
.page {
  opacity: 1;
}
</style>
</noscript>
</head>

[grimski]

I have a .no-js class on the body. When javascript is running my modernizr plug-in removes it. So I think I can just target the page with .no-js .page { opacity: 1; } for the same outcome.

Is that a problem with CodePen + pace.js then? Sure my code was identical to that in my templates?

Aside from the main navigation, there’ll be a few links to internal pages on generic/text pages. I suppose on a “Case Study” or “News index” page there could be quite a few links. 50-100 on the “Case Study” isn’t an improbable situation? But I suppose if I want that effect it’s unavoidable?

I’ll check how the page/fade responds when using the browsers back button.

[Shikkediel]

I’m using a similar event listener on a page with 100+ buttons and my old Android 2.3 phone seems to be fine with that…

[grimski]

Cool, well it all seems to work really well. I tried adding the line $('body').show(); to my javascript but it added a flicker (quickly showing then hiding the content) before the page change so I’ve left it out. Back/forward browser buttons seem to work ok without it.

[grimski]

Doh! One thing I’ve just thought of is I have social/email/phone number links and fancybox overlay links on some pages. I suppose I won’t want to fading the page out when these are clicked!

I wonder if it’s better to exclude these elements from the javascript or maybe only target links with a certain, generic class? Though that could be hard to maintain!

[Shikkediel]

You could target the relevant links by their url perhaps…

$('[href*="yoursite"]').click(function() {

Or any other term they might have in common.

[grimski]

Yeah I’ll try targeting http://www.websiteaddress.com/ and see how it works. That should be good enough but if I notice any problems I might just take the fade out off. The page will still fade in and the fade out only lasts a fraction of a second anyways. But that nice little fade is a nice touch, though I’m not sure anyone else would notice aside from myself!

Alternatively, there’s not many page types on this website. So I could just target main-nav, footer and blog/work list links in an array. But also include a class like .link-fade which when applied to internal text links in content it’ll still work. Though there won’t be too many links in the content, it’s still not really ideal so I’d probably go with the option of just removing it all together if it causes problems!

[grimski]

When I’ve come to test this, I’ve noticed an issue in iOS Safari – which also happens on Safari desktop.

Basically if you use the browser back button the page displayed is blank. I updated the code to:

$(document).ready(function() {

    $('[href*="www.websiteurl.com/"]').click(function() {
        event.preventDefault();
        newLocation = this.href;
        $('body').fadeOut(150, newpage);
    });

    function newpage() {
        window.location = newLocation;
        $('body').show();
    }
});

The window.location bit was previously just:

function newpage() {
    window.location = newLocation;
}

Now this code does help the issue. When clicking the background it jumps back (no fade, but that’s fine) but if you previously clicked a link in the main navigation, that navigation is open when the page reloads. My navigation is triggered by a toggle and display 100% height/width of the screen so it’s a bit odd. However, it’s certainly better than the page displaying no content!

Thought I’d update this to see if anyone had any ideas? To be honest, maybe it’s better to not use it if it’s going to potentially causes these issues? Though it is a nice little subtle effect! :)

[Shikkediel]

Could you show the code for the navigation? I’m thinking you could do something similar as was done with showing body again, perhaps by triggering the specific event that will close the navigation.

[grimski]

Yeah sure, it’s just this: http://codepen.io/moy/pen/OpRpxE

[Shikkediel]

Something like this then?

function newpage() {
  window.location = newLocation;
  $('body').show().removeClass('show-nav').addClass('hide-nav');

  setTimeout(function() {
    $('body').removeClass('hide-nav');
  }, 500);
}

Last part should be the same as this by the way:

$('body').show().removeClass('show-nav').addClass('hide-nav').delay(500).queue(function() {
  $(this).removeClass('hide-nav').dequeue();
});

[grimski]

Hmmm I still get the same issue on desktop safari unfortunately. Although, removed the script completely and it looks like the issue still occurs so it must be separate from the fade function and just to do with how Safari works when using the back button.

I also tried with:

$(document).ready(function() {

    $('a:not(.page-head__toggle)').click(function() {
        event.preventDefault();
        newLocation = this.href;
        $('body').fadeOut(150, newpage);
    });

    function newpage() {
        window.location = newLocation;
        $('body').show().removeClass('show-nav').addClass('hide-nav');

        setTimeout(function() {
            $('body').removeClass('hide-nav');
        }, 500);
    }
});

And it appears that the page ‘jumps’ when you click a link now so the fade out isn’t smooth. Same with the previous:

$(document).ready(function() {

    $('a:not(.page-head__toggle)').click(function() {
        event.preventDefault();
        newLocation = this.href;
        $('body').fadeOut(150, newpage);
    });

    function newpage() {
        window.location = newLocation;
        $('body').show();
    }
});

[Author]

Posts