Question

I would like to know how the slide effect between pages is done on that webpage. I would like to do the same between two pages but horizontally. I guess it probably uses jQuery, but if someone could give some clues, that’d be great

http://evancoleman.net

[Update] slideUp / slideDown

I’ve tried JKirchartz’ method but it doesn’t work like I would. slideUp() and slideDown() jQuery functions only hide and show elements with a vertical slide effects. I would like a technique which can switch pages with both vertical and horizontal slide effects.

Thank you

Answer 1

UPDATE

You can use the jQuery Cycle plugin to emulate this effect: http://jsfiddle.net/JKirchartz/zLekb/

basically the same css, but the jQuery is instead this:

$(function(){
    $("#site").cycle({
        fx : "scrollHorz",
        next : ".next a",
        prev : ".prev a",
        startingSlide : 1,
        timeout : 0
    });
  });​

and the prev & next buttons are a little different:

<div class="next"><a href="#">&raquo;</a></div>
...
<div class="prev"><a href="#">&laquo;</a></div>

the css isn’t perfect, but close enough…

---

Original Answer

Here’s a quick & dirty example of the technique: http://jsfiddle.net/JKirchartz/LChKh/

In most browsers hitting Ctrl+u will allow you to view source, from there you can see that the portfolio and about me pages are both already there, he’s just animating between the pages and hiding some of them based on the view.

the JS is really short to get the basic effect:

$(".pager").click(function(){
  $this = $(this);
  // this hides the current div by sliding it up
  $this.parent().slideUp();  
  // this line removes the btn from the link's ID to get the target div's ID
  // then it shows the target div by sliding it down
  $("#"+$this.attr("id").substring(0,5)).slideDown();
});​

and the markup is this

<div id="site">
<div id="page1">
    <h1>Page 1</h1>
    <p>In quis nibh metus...</p>
    <a href="#" id="page2btn" class="pager bottom">Page 2</a>
</div>
<div id="page2">
    <a href="#" id="page1btn" class="pager top">Page 1</a>
    <h1>Page 2</h1>
    <p>In quis justo velit, quis sagittis diam...</p>
    <a href="#" id="page3btn" class="pager bottom">Page 3</a>
</div>
<div id="page3">
    <a href="#" id="page2btn" class="pager top">Page 2</a>
    <h1>Page 3</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
</div>​

the basics of the CSS are

#page1, #page2, #page 3, #site {height:100%;width:100%}
#page1, #page3 {display:none}

There are extra slide effects in jQueryUI, with that you can

$(".pager").click(function(){
  $this = $(this);
  $this.parent().hide("slide", { direction: "left" }, 1000);  
  $("#"+$this.attr("id").substring(0,5)).show("slide", { direction: "left" }, 1000);
});​

but you’d have to tweak the CSS