Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Fade from page to page + loading bar Reply To: Fade from page to page + loading bar

#251103
grimski
Participant

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