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

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #250904
    grimski
    Participant

    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!

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

    #251118
    Shikkediel
    Participant

    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();
    }
    
    #251119
    Shikkediel
    Participant

    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>
    
    #251130
    grimski
    Participant

    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.

    #251131
    Shikkediel
    Participant

    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…

    #251359
    grimski
    Participant

    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.

    #251360
    grimski
    Participant

    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!

    #251377
    Shikkediel
    Participant

    You could target the relevant links by their url perhaps…

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

    Or any other term they might have in common.

    #251582
    grimski
    Participant

    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!

    #252413
    grimski
    Participant

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

    #252416
    Shikkediel
    Participant

    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.

    #252427
    grimski
    Participant

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

    #252481
    Shikkediel
    Participant

    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();
    });
    
    #252536
    grimski
    Participant

    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();
        }
    });
    
Viewing 15 posts - 1 through 15 (of 24 total)
  • You must be logged in to reply to this topic.