Scroll e movimento nella pagina personalizzato

folghe92

Nuovo Utente
14 Giu 2012
5
0
0
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao,
Potresti provare qualcosa di simile:
HTML:
<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
 
Discussioni simili
Autore Titolo Forum Risposte Data
M Posizionare una tabella con scroll su un elemento specifico PHP 3
E Div che scompare con scroll jquery Javascript 0
tomorc [HTML] Problema con scroll bar (risolto) HTML e CSS 0
L Cambiare classi solo scroll up jQuery 2
A [Javascript] [PHP] Scroll refresh chat Javascript 2
M [Javascript] Visualizza contenuto file XML aggiornato con text scroll Javascript 0
L Aggiungere contenuto con ajax durante lo scroll jQuery 1
T [HTML] Problema pulsante scroll down su ecommerce CMS (Content Management System) 0
O Allo scroll cambiare colore di sfondo jQuery 0
simone gatti [PHP] Problema scroll "content" PHP 2
U div fisso che ad un certo punto dello scroll scompare jQuery 2
F [HTML] Div in scroll insieme alla pagina HTML e CSS 0
A [Javascript] avviare un animazione js allo scroll della pagina Javascript 7
G Modificare navbar in base allo scroll jQuery 6
otto9due Apparizione e scomparsa div in base allo scroll pagina jQuery 4
giuseppe_123 [WordPress] scroll post WordPress 2
K Transazioni durante lo scroll della home page Javascript 2
P infinite scroll: quali i parametri corretti? WordPress 0
Jonn [Javascript] Cambiare colore sfondo div allo scroll del mouse Javascript 3
Marco_88 scroll in un div specifico Javascript 6
M Scroll che mostra e nasconde elementi Javascript 2
N Div metà fisso e metà scroll HTML e CSS 4
voldemort Sfondo parallasse con scroll e ritardo Javascript 1
felino [HTML] DIV menu fisso durante lo scroll HTML e CSS 5
F impedire scroll verticale Javascript 0
F impedire scroll verticale jquery Javascript 0
D Problema con lo scroll della pagina e del div position:fixed HTML e CSS 0
F Animazione jQuery scroll - ancore, si può fare? Javascript 1
L [RISOLTO]Pagina PHP jquery Mobile non funziona scroll nella pagina jQuery 3
I spostare div in base all'altezza dello scroll della pagina Javascript 1
J attivare sezioni sito scroll jQuery 1
J javascript sito scroll Javascript 4
Mauro Guardiani scroll Discussioni Varie 0
L Scroll in Basso Chat Javascript 0
L Infinite Scroll Javascript 1
T Realizzazione "scroll" orizzontale Javascript 4
F scroll thunbnail Joomla 2
P scroll veeticale di un testo Javascript 1
B Aiuto per scroll div jQuery 4
P Problema visualizzazione pulsanti dopo scroll jQuery 6
Mauro Guardiani infinite scroll Discussioni Varie 0
Mauro Guardiani auto scroll Discussioni Varie 0
M Scroll del Sito Javascript 0
P Lightbox + Smooth Scroll Horizontal Javascript 1
D Scroll NEWS in php PHP 1
W Scroll Images tipo "Dock Menu" Ajax 3
G Parametri scroll Flash 2
R scroll flash cs3 testo e immagini con scrollpane? Webdesign e Grafica 2
R scroll flash cs3 testo e immagini con scrollpane? Flash 2
B Tabelle fisse allo scroll HTML e CSS 12

Discussioni simili