SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do I make a sliding transition like this one?

    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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,880
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    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

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

    Code:
    <!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/...g-with-jquery/

  3. #3
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi there,
    Thx man for taking the time! Your solution works fine=)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •