How do I make a sliding transition like this one?

JavaScript
1

I want to have something like this page has http://mammothbooth.com/#/how-it-works.html . When u klick a link the page slides in, but the header stays where it is.

Anyone know any good jQuery script or some other solution?

thanks before hand

2

Hi there,

It seems that the page you link to has just written a custom function to animate the pages into and out of view.
Here’s their js file: http://mammothbooth.com/js/functions.js
Have a look at the function called animatePage() which yu will find towards the top of the file.

Seeing your question, however, got me thinking about how easy this would be to implement from scratch, so I made you a simple two page demo with the same functionality.

What I did was use the jQuery UI library which gives us the ability to animate the .hide() and .show() functions.
When a user clicks on a menu point, the content is animated out of view, then (using a callback) once the animation is complete, the link is followed.
On the new page, the content is then animated into view again.

HTH

home.html

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Home</title>
    <style>
      #menu{background:#ccc; padding:15px; margin:15px; width:60%; margin:0 auto;}
      #menu a{text-decoration:none; color:#000;}
      #menu a:hover{text-decoration:underline;}
      #menu a.sel{font-weight:bold;}
      #menu a.sel:hover{text-decoration:none; color:#000; cursor:default;}
      #content{background:#999; padding:15px; margin:15px; height:450px; width:60%; margin:15px auto;}
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  </head>

  <body>
    <div id="menu">
      <a href="" class="sel">Home</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="./about.html">About</a>
    </div>

    <div id="content">
      <h1>Home</h1>
      <p>Some content</p>
    </div>
    <script>
      $(document).ready(function() {
        $("#content").show('slide', { direction: 'right' }, 1000);

        $("#menu a").on("click", function(e){
          var href = $(this).attr("href");
          e.preventDefault();
          $("#content").hide('slide', { direction: 'left' }, function() { document.location.href = href; }, 1000);
        });
      });
    </script>
  </body>
</html>

about.html

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>About</title>
    <style>
      #menu{background:#ccc; padding:15px; margin:15px; width:60%; margin:0 auto;}
      #menu a{text-decoration:none; color:#000;}
      #menu a:hover{text-decoration:underline;}
      #menu a.sel{font-weight:bold;}
      #menu a.sel:hover{text-decoration:none; color:#000; cursor:default;}
      #content{background:#999; padding:15px; margin:15px; height:450px; width:60%; margin:15px auto;}
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  </head>

  <body>
    <div id="menu">
      <a href="./home.html">Home</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="./about" class="sel">About</a>
    </div>

    <div id="content">
      <h1>About</h1>
      <p>Some more content</p>
    </div>
    <script>
      $(document).ready(function() {
        $("#content").show('slide', { direction: 'right' }, 1000);

        $("#menu a").on("click", function(e){
          var href = $(this).attr("href");
          e.preventDefault();
          $("#content").hide('slide', { direction: 'left' }, function() { document.location.href = href; }, 1000);
        });
      });
    </script>
  </body>
</html>

BTW, if you are happy with one giant page that scrolls horizontally, this might help: http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/

3

Thx man for taking the time! Your solution works fine=)