Question

If you go to this site here: http://alexdunphy.github.com/refineslide/#installation

And click on the menu buttons “Installation”, “Tuning”, “FAQ”, “About” etc… you’ll notice there is a nice transition between each page, without the entire page reloading.

I just started web development and I want to try and achieve a similar effect.

Here’s my guess on how he is doing it:

1. iFrame with that content, button triggers each iFrame to be loaded. Each iFrame’s top level <div> has some -webkit- or -moz- animation in.

2. The entire content is in a div, each button simply fades the previous div out and fades the next div in with some CSS animation.

I will try these both, unless you guys know how it is done.

Out of 1 and 2 which is the more appealing choice?

Answer 1

It uses a pseudo-selector called target, the links append #pagename to the url, and the appropriate animations take place from there.

The HTML might look something like:

<p id='pagename'>This is some text</p>

The links look like:

<a href='#pagename'>This link goes to pagename</a>

And then in the CSS, you can define:

#pagename:target {
    font-weight: bold;
}

This would make the text inside #pagename be bold when you click the link. From here you can extend it to include animations, something like giving all divs opacity 0 and position left: 50px;

And then whenever a div is targeted, you animate the opacity to 1 and the left to 0px

Edit: Here’s a quick example I whipped up which emulates the exact effect you’re going for: http://jcolicchio.latestdot.net/test_target.html#page1