Forums

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

Home Forums CSS Fade Out between pages

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #31893
    Rugg
    Participant

    Hello… I was curious if anybody knew how to fade out content during a transition to a new page.

    Example Link
    (Click on any of the page links at the top)

    http://www.stylodesign.co.uk/

    Thank You

    #56767
    lyleyboy
    Member

    That will be javascript.

    1, On click fade the page elements out.
    2, Get JS to redirect to the new page.

    #56781
    Chris Coyier
    Keymaster

    $(“body”).fadeOut();

    That’d be jQuery fading out the page…

    I understand that’s not much info =/ I’ll be releasing a little framework that is very similar to this, only for slides, very soon.

    #56645
    soap
    Participant

    See below post…

    #56609
    soap
    Participant

    By the way, if you are wanting to fade pages IN as well, you’ll want to set the body’s display:none in the jquery and fadeIn().. Holla


    $(document).ready(function() {
    $('body').css('display', 'none');
    $('body').fadeIn(1000);

    $('.link').click(function() {
    event.preventDefault();
    newLocation = this.href;
    $('body').fadeOut(1000, newpage);
    });
    function newpage() {
    window.location = newLocation;
    }
    });

    What this does is sets the body to not display, then fades it in.

    Then once you click a link which you have deemed worthy of making the page fade out, it first prevents the default, which is instantly going to that link, and sets the variable new Location to be the href attribute of the currently clicked link. Then the body fades out and after the fade out it calls function newpage().

    Try that puppy out.

    Sorry I have a bit too much fun when it comes to js/jquery, I’m still learning myself so it’s a learning experience for both of us!

    #111935
    stavroch
    Member

    Do you have any news or tutorial of how can I have fade in – fade out between web pages?

    #131070
    tomscustoms
    Member

    I know this is an old thread but I couldnt help notice the code that was posted… Everything soap posted will work perfectly fine for what youre trying to do, he just forgot to pass the event object.

    The code below should get you the effect you were looking for:


    $(document).ready(function() {
    $('body').css('display', 'none');
    $('body').fadeIn(1000);

    $('.link').click(function(event) {
    event.preventDefault();
    newLocation = this.href;
    $('body').fadeOut(1000, newpage);
    });

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

    If you notice, the only difference in the code above and what soap posted was on the line with


    $('.link').click(function() {

    it should have read


    $('.link').click(function(event) {

    Hopefully this helps someone out in the future :)

    #132326
    bultala
    Member

    Dear tomscustoms, thanks for the update. I have not been able to get the FadeOut work at all! When a button is clicked, current page immediately disappears (doesn’t fadeout) and the new page nicely fades in. Have you tested above code? is there a way to fix it? Thanks.

    #136801
    kakaramz
    Member

    hai guys, how to transitions page using slide effect ? thanks

    #141505
    DanH
    Member

    Hi bultala,

    I was just playing around with the code and I think I know what you’re looking for to make the page fade out when the link is clicked to go to another page – you just need to add the class=”link” to your “a” tag in the html.

    see where tomscustoms wrote this line of code:

    $(‘.link’).click(function(event)

    it could have been written like this as well:

    $(‘a.link’).click(function(event)

    the “.link” is the class that needs to be added to any “a” tag(s) in your html that you would like to execute the fade out function while leaving the current page.

    #180370
    jail1
    Participant

    Yeah , well I don’t quite recommend doing this for an enterprise project or a blog or an e-commerce website. Crap, I don’t recommend doing this at all. If the user doesn’t have JS enabled there is NO content for him what-so-ever. It is always good to have a fallback. So you can use modernirz to set the display to visible if there is no JS active.

    #180424
    wahhabb
    Participant

    Another disadvantage of this type of transition is that it adds nearly two seconds to each page transition. There is plenty of research showing this will greatly reduce user retention. If you want to do this sort of thing, a better approach is to use Ajax to load the new page content. If the basic page layout is the same, you can simply replace the content area, using a fade-out/fade-in, with the chrome staying intact. You can read about doing this at http://blog.fraser-hart.co.uk/how-to-ajaxify-your-website-with-ajaxify-and-history-js/ and there is a WordPress plugin that you can use at https://wordpress.org/plugins/advanced-ajax-page-loader/. It’s a bit more complex, because you need to a) update history, so the back button works, b) update the URL, so the user can save a page to favorites, c) deal with page title, d) possibly update breadcrumbing or menu highlighting. But it creates a vastly better user experience than the conventional flashing of loading a new page.

    #180441
    jail1
    Participant

    Yes! Exactly. You dont want dom manipulation with jquery for smth like this. AJAX technology is a way better solution. Future-proof, present-proof, past-proof lol, and on top of that you can customise the data injection the way you want.

    #199627
    wired420
    Participant

    To get this to work with other code I had to change one line. Changing this one line made it interchangeable with my other modules and packages. Don’t see where it would hurt for anyone else to use it either for compatibility sake. It will also work if you say set a whole div or li in a menu bar to be a link or hover element.

    This line

    newLocation = this.href;
    

    Was replaced with this one

    newLocation = $('.link a').attr("href");
    

    For a final code

    $(document).ready(function() {
      $('body').css('display', 'none');
      $('body').fadeIn(1000);
      $('.link').click(function(event) {
        event.preventDefault();
        newLocation = $('.link a').attr("href");
        $('body').fadeOut(1000, newpage);
      });
      function newpage() {
        window.location = newLocation;
      }
    });
    
    #199636
    Beverleyh
    Participant

    Just planting this here for future reference as you can achieve a nice fadein with CSS alone nowadays (IE10+ and modern browsers).

    .content { -webkit-animation:fadein 0.7s; animation:fadein 0.7s }
    @-webkit-keyframes fadein { from {opacity:0} to {opacity:1} }
    @keyframes fadein { from {opacity:0} to {opacity:1} }
    
Viewing 15 posts - 1 through 15 (of 16 total)
  • The forum ‘CSS’ is closed to new topics and replies.