fade da landing-page a sito

**stardom** · 22-03-2011, 14:49

Spero che questo mio post non rimanga ignorato, in quanto ho bisogno di un aiuto e non so proprio da dove cominciare. Premetto che si tratta di JQuery.

Ho un sito già funzionante, con una index page già complessa e piena di Javascript, ma voglio aggiungere una pagina d'introduzione. La pagina intro dovrebbe solo essere un logo su sfondo nero (con un certo grado di opacity che fa intravedere il sito sottostante) e dovrebbe sfumare e scomparire (dopo qualche secondo o cliccando sul logo) per far comparire il vero sito in tutte le sue funzionalità.

E' una cosa semplice e si dovrebbe poter realizzare con quanto descritto in http://api.jquery.com/fadeto/ oppure http://api.jquery.com/fadeIn/. Tutto questo sarebbe facile se fosse una pagina indipendente, ma io devo inserirlo in un sito già esistente, ovvero nel codice della index page.

Non saprei dove né come infilare quel codice nella pagina: www.nelpaesedelvino.com

Qualche direttiva?

**cavicchiandrea** · 22-03-2011, 15:54

Non capisco il problema, comunque se è relativo ad jquery documenti qui se invece e come includere file o script esterni documenti qui

**stardom** · 23-03-2011, 11:17

...dirmi di andare a studiare jquery dall'inizio non mi aiuta molto a risolvere il problema. Speravo in un aiuto più diretto.

**stardom** · 23-03-2011, 16:46

ho creato una pagina www.nelpaesedelvino.com/intro.htm
che al click dovrebbe far comparire il sito www.nelpaesedelvino.com

Non so come infilare il codice della prima nella seconda, una sorta di onclick > index.htm

Ho provato con il seguente codice,

<script>
$("p:first").click(function () {
$(this).fadeTo("slow", 0.0); { window.location.href="index.htm"; }
});
</script>

ma nella transizione si crea un vuoto dip agina bianca.

Qualcuno mi capisce?

**Vindav** · 23-03-2011, 17:51

Questa:

Ho un sito già funzionante, con una index page già complessa e piena di Javascript, ma voglio aggiungere una pagina d'introduzione. La pagina intro dovrebbe solo essere un logo su sfondo nero (con un certo grado di opacity che fa intravedere il sito sottostante) e dovrebbe sfumare e scomparire (dopo qualche secondo o cliccando sul logo) per far comparire il vero sito in tutte le sue funzionalità.

e questa:

ho creato una pagina www.nelpaesedelvino.com/intro.htm
che al click dovrebbe far comparire il sito www.nelpaesedelvino.com
Non so come infilare il codice della prima nella seconda, una sorta di onclick > index.htm

Son 2 cose ben differenti, se vuoi realizzare la prima non devi creare 2 pagine ma una sola. Dove al suo interno ci sarà un div con il logo. Si chiamano finestre modali.

codice:

<body>
  <div>
    contenuto del sito
  </div>
  <div>
      

contenuto della finestra modale</p>
  </div>
</body>

**stardom** · 23-03-2011, 18:01

si, che tutto va fatto in una pagina l'ho capito, ma due div di seguito non vengono visualizzati uno dopo l'altro? Io invece ho bisogno che un div "intro" sovrapponga il div "website".

Sto andando per tentativi con lo script

$("p:first").click(function () {
$(this).fadeTo("slow", 0.0, function () {
$(this).window.location="index.htm";
});
);
});

dove credo che il segreto stia nella seconda function... ma non mi viene

**dacanal** · 23-03-2011, 20:20

Credo che la struttura proposta di Vindav vada bene, devi solo modificare lo stile (tramite CSS) del div modale:

prova a settare qualche proprietà (tipo "position" se non ricordo male) e poi tramite javascript lo fai scomparire come più ti aggrada.

**stardom** · 23-03-2011, 20:23

Ci sono quasi.... La prima parte del codice è

codice:

<body> 
<div id="intro">[img]images/vinelogo4new.jpg[/img]</div>
<script> 
$("div#intro").click(function () { 
$(this).fadeTo("slow", 0.0); 
}); 
</script> 
 
	website

ma l'immagine è sotto, non sopra il sito, e per di più il fade non funziona più. Spero che in serata qualcuno abbia tempo da dedicarmi.

**Vindav** · 24-03-2011, 11:04

il css va applicato al div e non all'immagine...

**stardom** · 24-03-2011, 15:39

Originariamente inviato da Vindav
il css va applicato al div e non all'immagine...

ancora un pezzettino e ci stiamo arrivando...

Ora ho l'immagine davanti al sito, grazie al seguente codice:

codice:

<body> 
<div id="intro" style="position: absolute; top: 0; left: 0; margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; z-index:100;">[img]images/intropage.jpg[/img]</div>
<script> 
$("div#intro").click(function () { 
$(this).fadeTo("slow", 0.0); 
}); 
</script>

Ma i problemi sono ancora:
1) l'immagine non copre tutto lo schermo, ma solo una parte
2) all'apertura della pagina, per un attimo si vede il sito, e solo poi appare la pagina intro (l'immagine) di copertura

Dunque: come si crea una full screen "foreground" image?

Discussione: fade da landing-page a sito

Strumenti discussione

Ricerca discussione

Visualizza

fade da landing-page a sito

Permessi di invio