2

I'm looking to achieve a page transition whereby a link to another page will, instead of loading the page, slide the next page in over the next one. Something like the MOVE transitions on this demo site: http://tympanus.net/Development/PageTransitions/
Although this isn't quite right as this is all one page (i.e. the url doesn't change), they need to be transitions between separate pages.

I got as far as something like this:
HTML:

<body>
    <div class="container">
        <a href="next-page.html" class="slide_page">Link</a>
        TEXT GOES HERE
    </div>
</body>

jQuery:

$(function(){
    // hide the div on page load and use a slidedown effect
    $('div.container').fadeOut(0, function(){
        $(this).slideDown(500);
    });
    // capture link clicks and slide up then go to the links href attribute
    $('a.slide_page').click(function(e){
        e.preventDefault();
        var $href = $(this).attr('href');
        $('div.container').slideUp(500, function(){
            window.location = $href;
        });
    });

});

But this isn't quite right as this method slides the current page upwards, before sliding the next page downwards, but the url change here is good. Any suggestions would be greatly appreciated!

Viper
  • 1,327
  • 2
  • 12
  • 33
user1374796
  • 1,544
  • 13
  • 46
  • 76
  • http://stackoverflow.com/questions/4403004/sliding-an-entire-web-page duplicate? – Michael Unterthurner Aug 02 '13 at 13:10
  • That is the expected outcome. The example you linked doesn't load a new page it has the content on different divs. When you load a new url then the script first makes the ending animation of the old page, then load the new page and then makes the starting animation. There is no other possibility this way. – Sven Bieder Aug 02 '13 at 13:13
  • Hey I recently used that page transition thing. I might be able to help you. Do you mind explaining what the exact problem is that you have? Because I'm not sure I get your problem. – Secret Aug 02 '13 at 13:19
  • @Secret Hey, well ideally I'd like a page transition similar to the `MOVE` ones on here: http://tympanus.net/Development/PageTransitions/ I know that they are just separate divs sliding over one another, I'm just wondering if there was a transition from one page to another that was similar? – user1374796 Aug 02 '13 at 13:28
  • For the record, every time I see a question like this I read it as: "Hi, I want to make my web pages load even slower than they already do, using an unfamiliar interface, just because I think it looks different, even though everybody's already seen it in PowerPoint presentations and hates it there, too. Can someone please help me break the Web just a little more?" – Blazemonger Aug 02 '13 at 13:34
  • @Blazemonger - Actually, this technique is used in a number of different places, the most prominent being GitHub. It's just that when they're done well and properly, they're pretty much invisible. – Shauna Aug 02 '13 at 13:36
  • @Shauna Yes, and I've always hated it on GitHub, too. Never seen the benefit of it. – Blazemonger Aug 02 '13 at 13:38
  • @Blazemonger - Do you hate it here, too? The SE sites use a technique not much different with the animated loading in of things. Also, your dislike of the technique doesn't really have any bearing on page load speeds, and the whole point of the underlying technique is to make load times faster, because you're not even trying to reload certain assets (or even the entire DOM). The animation is largely gravy and provides that touch of polish that most people notice, but can't pinpoint. – Shauna Aug 02 '13 at 13:43

3 Answers3

2

If I get this correctly, you want to slide something, but instead of just sliding an arbitrary div, you want to slide in a whole new web page?

What you could do is use AJAX. So basically, make an ajax request then when you receive the data, change your #next-page.html() to the data you received.

You'll have to cycle them now though, so setting an '#active-page' is probably better.

Here is the site where I used that. http://cs75.heliohost.org/ When you click a link, a slide animation is shown, but if I edited my slide's html I could have put the new page on that sliding rectangle.

Here are the things you need:

  • Two 'Pages'. You will be reusing these as you go.

  • When a user clicks a link, make an ajax call, then replace the 'inactive-Page' with the data you receive.

  • Make the 'inactive-Page' active and then apply your animation.

  • Turn the replaced page as 'inactive-Page'

Feel free to ask if there was anything vague in my answer.

Secret
  • 3,291
  • 3
  • 32
  • 50
  • this looks good, the site you referenced looks quite close to what I'm after (just a different direction). I'll try it out tonight and let you know how I get on! – user1374796 Aug 02 '13 at 17:34
  • the site you've linked too now appears to be inactive?! That is definitely what I'm after achieving though, let me know when it goes back online and I'll take another look. – user1374796 Aug 03 '13 at 00:48
  • @user1374796 Yeah, unfortunately I seem to have been suspended, that site was just a throwaway free site for a class. See my edits though. – Secret Aug 03 '13 at 03:11
1

You can set the query string to ?animate=true and animate downwards in next-page.html

$(function() {
   if (location.search.match(/animate=true/)) {
      $('body').hide().slideDown();
   }
});

You can also hide the body using html so it will be hidden before DOM ready.

and the link would be

<a href="next-page.html?animate=true" class="slide_page">Link</a>
jcubic
  • 61,973
  • 54
  • 229
  • 402
1

Regarding the animation:

If you want both to slide up, you have to tell both to slide up. So instead of your "slideDown", use "slideUp".

If you look at the page's source, you'll see they're actually using CSS animations to do most of the work. This allows them to easily run two animations at once and allows the browser to use hardware acceleration to handle the animation (jQuery, and JS in general, tend to queue them by default, but you can add queue:false to make them run at the same time, and JavaScript doesn't yet have access to hardware acceleration).

The keystone of these animations are in the animations.css file. Notice the named keyframes at the bottom and how they work:

@-webkit-keyframes moveToTop {
    to { -webkit-transform: translateY(-100%); }
}
@-moz-keyframes moveToTop {
    to { -moz-transform: translateY(-100%); }
}
@keyframes moveToTop {
    to { transform: translateY(-100%); }
}

You don't need to make them keyframes like that, you can just build them into the elements (or classes) themselves. I think they use named keyframes because they use a lot of the same animations over and over again. The transforms, though, are what makes them move up (or any other direction you want).

Regarding the URL changes:

Instead of trying to write the functionality yourself, you might want to look into Pjax. It's the library that makes GitHub do the page slide thing that you're looking for. If nothing else, you can look at the source and see how they do it.

How it works is by combining AJAX with PushState (hence the name). When you click a link, the JavaScript overrides the default click behavior and makes an AJAX call to get the new content. It then activates a PushState call, which updates the browser's URL (this is the key to the "different pages" thing), and animates in the new content. In browsers that don't support PushState, the pages just load like any other site.

Community
  • 1
  • 1
Shauna
  • 9,495
  • 2
  • 37
  • 54