Question

Hi I am trying to create a one page website that contains multiple div’s about the same size as the window.The website will have a menu that will refer to each div on the page.What I want to do is animate the window when the user clicks on one of the menu links to it’s coresponding div.

http://www.nistoralexandru.comule.com/div.jpg

When a user clicks on a link I need the window to animate to that div similar to this site:

http://shahkaarshah.com/

How can I do this?

Answer 1

The site you’re linking to is built with Flash, replicating the animation of different page elements with javascript should’nt be to hard, but there’s really no quick “one size fits all” function to do it.

Here’s a quick example of how it’s usually done :

Build some sort of HTML structure:

​<div id="site">
    <div id="main" class="page">
        <ul>
            <li><a href="#page1">Page 1</a></li>
            <li><a href="#page2">Page 2</a></li>
            <li><a href="#page3">Page 3</a></li>            
            <li><a href="#page4">Page 4</a></li>
            <li><a href="#page5">Page 5</a></li>
        </ul>
    </div>
    <div id="page1" class="page"><a href="#main">Back</a></div>
    <div id="page2" class="page"><a href="#main">Back</a></div>
    <div id="page3" class="page"><a href="#main">Back</a></div>
    <div id="page4" class="page"><a href="#main">Back</a></div>
    <div id="page5" class="page"><a href="#main">Back</a></div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

And animate it around the viewport with a little javascript:

$('.page a').on('click', function(e) {
    e.preventDefault();
    var href = $(this).attr('href'),
        top = $(href).css('top'),
        left = $(href).css('left');
    $("#site").animate({top: '-'+top, left: '-'+left}, 1000);
});

Here’s a FIDDLE