Intro sitoweb

**james13** · 17-10-2013, 11:43

Salve ragazzi,
sto cercando di realizzare una semplice transizione da pagina all'altra in stile FadeIn&FadeOut. In sostanza ho un'immagine a fullscreen nella mia index.html e ora vorrei cheal click di questa index,cioè in qualsiasi parte della pagina e/o immagini parti un transizione tipo FadeIn, cioè scomparsa, tra la mia pagina index.html e la mia pagina home.html.

Esiste qualche esempio? Poi è possibile realizzarlo in html?o meglio il php?

Grazie in anticipo

PS.
Spero di essere statochiaro,perchè sono un neofita del linguaggio HTML, infatti sono alle prime armi e vorrei piano piano passare al jsc,css,php.

**widoz83** · 17-10-2013, 12:23

potresti fare una funzione js nella index che effettua un fadeout dell'immagine e poi fa un redirect alla pagina home.

e nella home inserisci un fadein sul contenuto della pagina.

**james13** · 17-10-2013, 12:28

Originariamente inviata da widoz83

potresti fare una funzione js nella index che effettua un fadeout dell'immagine e poi fa un redirect alla pagina home.

e nella home inserisci un fadein sul contenuto della pagina.

Si è un'ottima soluzione,grazie mille per la risposta

Ma come possofare per realizzarla? Cioè esiste un esempio?
La transzione tra una pagina all'altra deve avvenire al click del mouse su una qualsiasi parte dell'immagine in index.html.

**james13** · 17-10-2013, 12:48

Io tengo scritto così nella mia index:

codice:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    
    <title>INDEX</title>
    
    <style>
        * { margin: 0; padding: 0; }
        
        html { 
            background: url(images/index.png) no-repeat center center fixed; 
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
        
        #page-wrap { width: 400px; margin: 50px auto; padding: 20px; background: white; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; }
        p { font: 15px/2 Georgia, Serif; margin: 0 0 30px 0; text-indent: 40px; }
    </style>
    
   
    
</head>

<body>

 
    
</body>

</html>

Ora se clicco sull'immagine, deve passare alla pagina home.html con una transizione fadein. Poi quando sarò nella home.html,dovrà fare la stessa cosa, ma con un fadeout.

**widoz83** · 17-10-2013, 13:07

beh se esiste un esempio specifico non lo so, basta cercare in rete.
la libreria JQuery ti fornisce proprio delle funzionalità che fanno al caso tuo (onClick, FadeIn, FadeOut). Prova a darci un occhio e ad informarti anche riguardo Javascript.
Darti il codice così, visto che sei alle prime armi non avrebbe molto senso secondo me.

Poi appena capisci un po' il giro e hai dubbi o domande chiedi pure

**james13** · 17-10-2013, 15:11

Originariamente inviata da widoz83

beh se esiste un esempio specifico non lo so, basta cercare in rete.
la libreria JQuery ti fornisce proprio delle funzionalità che fanno al caso tuo (onClick, FadeIn, FadeOut). Prova a darci un occhio e ad informarti anche riguardo Javascript.
Darti il codice così, visto che sei alle prime armi non avrebbe molto senso secondo me.

Poi appena capisci un po' il giro e hai dubbi o domande chiedi pure

Ok,ma credo si tratti di una cosa semplice. Io non voglio codice gratis tanto per averlo. Ovvio che lo studerei

**widoz83** · 17-10-2013, 15:44

non volevo fare il bacchettone ci mancherebbe

questo potrebbe tornarti utile:

codice:

$("html").click(function(){
     $("html").animate({ opacity: 0 }, 2000, function(){
          location.href = "http://www.google.it/";
     });
});

**james13** · 17-10-2013, 17:18

Originariamente inviata da widoz83

non volevo fare il bacchettone ci mancherebbe

questo potrebbe tornarti utile:

codice:

$("html").click(function(){
     $("html").animate({ opacity: 0 }, 2000, function(){
          location.href = "http://www.google.it/";
     });
});

Ho capito la funzione, e cambiando 2000 cioè i secondi, imposto il reindirizzamento. Il problema è che io volevo una cosa più fluida, non un reindirizzamento(forse ho sbagliato io a spiegarmi).
In sostanza quando clicco sull'immagine a schermo interno, non è possibile creare effetto(forse non si chiama fadein), che tipo apertura sipario o altre, e subito vedo l'immagine inserita in home.html. Peròil tutto deve essere fluido,non che devo aspettare dei secondi. Forse è quello il problema. Io voglio un effetto carino come intro.
Come devo cercare su Internet? Spero di essere stato chiaro, perchè non so come trovare.

Grazie

**widoz83** · 17-10-2013, 22:02

ok, se non devi fare reindirizzamenti allora ti conviene avere una sola pagina, e il contenuto (della tua attuale home) lo rendi nascosto di default. Poi appena c'è il click, fai mostrare il contenuto nascosto.
Oppure se devi per forza avere due file separati mi viene in mente questa soluzione:

codice:

$("html").click(function(){
     $("html").animate({ opacity: 0}, 1000, function(){
          $.get("home.htm",function(data){
               $("body").html(data);
          });
          $("html").css({backgroundImage:"none"})
	  $("html").animate({opacity:1 }, 1000);
     });
});

Sinceramente per l'effetto a sipario non saprei, potresti far scorrere due div con animate() in senso opposto e poi mostrare il contenuto, però a questo punto credo che l'immagine di sfondo non sia più da mettere nel tag html ma gestire uno o due div ad hoc. magari una ricerca "curtain effect" su google potrebbe farti trovare qualcosa di utile.

**james13** · 18-10-2013, 09:26

Originariamente inviata da widoz83

ok, se non devi fare reindirizzamenti allora ti conviene avere una sola pagina, e il contenuto (della tua attuale home) lo rendi nascosto di default. Poi appena c'è il click, fai mostrare il contenuto nascosto.
Oppure se devi per forza avere due file separati mi viene in mente questa soluzione:

codice:

$("html").click(function(){
     $("html").animate({ opacity: 0}, 1000, function(){
          $.get("home.htm",function(data){
               $("body").html(data);
          });
          $("html").css({backgroundImage:"none"})
      $("html").animate({opacity:1 }, 1000);
     });
});

Sinceramente per l'effetto a sipario non saprei, potresti far scorrere due div con animate() in senso opposto e poi mostrare il contenuto, però a questo punto credo che l'immagine di sfondo non sia più da mettere nel tag html ma gestire uno o due div ad hoc. magari una ricerca "curtain effect" su google potrebbe farti trovare qualcosa di utile.

Diciamo che l'effetto è come se al mio click io mi avvicino o entro(stile 3d) nell'altra pagina. Ora preciso non so se si chiama,se Fade o altro.

Discussione: Intro sitoweb

Strumenti discussione

Ricerca discussione

Visualizza

Intro sitoweb

Permessi di invio