Scroll e movimento nella pagina personalizzato

[folghe92]

Ciao a tutti,
dovrei realizzare un sito a pagina unica che si muvi all'interno della stessa in maniera personalizzata tipo questo www.artofflightmovie.com , ovviamente l'esempio è molto complesso, mi basterebbe arrivare a una cosa simile e semplificata...
cosa potete consigliarmi? esiste qualche scrips o qualche tutorial o qualcuno è in grado di aiutarmi.

grazie mille a tutti :fonzie:

 

[criric]

Ciao,
Potresti provare qualcosa di simile:

<style type="text/css">
    html body {
        text-align: center;
    }
    #slide1_controls span {
        margin:auto;
        padding-right:2em;
        cursor:pointer;
    }
    #slide1_container {
        width:850px;
        height:481px;
        overflow:hidden;
        position:relative;
    }
    #slide1_images {
        position:absolute;
        left:0px;
        width:1800px;
        -webkit-transition:all 1.0s ease-in-out;
        -moz-transition:all 1.0s ease-in-out;
        -o-transition:all 1.0s ease-in-out;
        -ms-transition:all 1.0s ease-in-out;	
        transition:all 1.0s ease-in-out;
    }
    #slide1_images img {
        padding:0;
        margin:0;
        float:left;
    }
    #container {        
        margin:auto;
        width:850px;
        text-align: left;
    }
    div.content { 
        width:850px;
        height:481px;
        font-size: 26px;
        text-align: center;
        background-color: #e4e4e4;
    }
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#slide1-1").click(function() {
            $("#slide1_images").css("top","0");
        });
        $("#slide1-2").click(function() {
            $("#slide1_images").css("top","-481px");
        });
        $("#slide1-3").click(function() {
            $("#slide1_images").css("top","-962px");
        });
        $("#slide1-4").click(function() {
            $("#slide1_images").css("top","-1443px");
        });
    });            
</script>
<div id="container">
    <p id="slide1_controls">
        <span id="slide1-1">HOME</span>
        <span id="slide1-2">CONTACT</span>
        <span id="slide1-3">WHERE</span>
        <span id="slide1-4">DOWNLOAD</span>
    </p>
    <div id="slide1_container">
        <div id="slide1_images">
            <div class="content"><br/><br/>home page</div>
            <div class="content"><br/><br/>contact page</div>
            <div class="content"><br/><br/>google page</div>
            <div class="content"><br/><br/>download page</div>		
        </div>
    </div>
</div>

da qui http://css3.bradshawenterprises.com/sliding/ mi sono ispirato

Purtroppo la transiton sembra non essere ancora supportata da Internet Explorer

Potrebbe cmq essere un punto di partenza per creare qualcosa di piu elaborato