Dissolvenza nel cambio pagina

**DPS_TV** · 24-07-2008, 20:25

Salve,
sto cercando uno script che mi permetta di avere una transizione di fade-out e fade-in ogni cambio di pagina del mio sito.
Dicendola in modo diverso e più chiaro, vorrei che quando apro la mia pagina ci fosse ad esempio un div con z-index superiore a tutto che da sfondo nero con opacità 100% con una dissolvenza diventi al 0%. Inoltre passando da una pagina all'altra l'ideale sarebbe che avvenisse prima il contrario, cioè da 0% a 100% e poi all'apertura della nuova pagina ancora da 100% di opacità a 0%, quindi trasparente.
Qualcuno sa se esiste già qualcosa di simile?
Io ho cercato nel forum e non c'è nulla, però girando in rete ho trovando QUESTO che gestisce le transizioni come vorrei io. Il problema è che non riesco a "prendere" solo quell'effetto dato che al link corrisponde un vero e proprio site-show con tanto di sequenza in automatico.
Per far funzionare l'effetto dovete cliccare, una volta entrati, sul play del menù di sinistra.
Me lo farei da solo questo script ma non so proprio dove mettere le mani all'interno del sorgente.

Grazie in anticipo!!!

**artorius** · 24-07-2008, 21:38

Perchè non usi una libreria di Effetti per JS come Mootools o jQuery?

Hanno tutti delle Funzionalità per usare un effetto Fade (cambiando l'opacity dell'elemento da 0 (trasparente) a 1 (visibile))

Crei un div con background-color: #000000; poi gli setti width ed height con le dimensioni della window, all'evento domReady, infine fai l'effetto fade out, all'onload della pagina. Al onunload della pagina, fai l'effetto fade in rimettendo la pagina nera.

**DPS_TV** · 24-07-2008, 22:01

Grazie della risposta!
Bene, qualcosa ho trovato e ho fatto.
Facendo qualche tentativo con <body onload="ecc..... non mi funziona, diciamo che sono abbastanza a caso perché non ne capisco quasi niente, saresti così gentile da indicarmi la sintassi corretta relativa alla prova che ti ho messo online gentilissimo!QUI per l'onload e l'unonload che mi dicevi?
Com'è settato adesso fa il cambio di opacità cliccando sopra il "clicca"...

**artorius** · 24-07-2008, 22:27

io avrei usato Mootools (mootools.net) che contiene un solo file e non causa problemi di incompatibilità tra i browser.

fai cosi:

Codice PHP:




var fx;



window.addEvent('domready', function(){

  fx = new Fx.Opacity('container', {duration: 500});

})



window.addEvent('load', function(){

  fx.hide();

});



window.addEvent('unload', function(){

  fx.show();

});

Non ricordo se le funzioni sono quelle, guarda la documentazione a docs.mootools.net

**DPS_TV** · 24-07-2008, 23:54

aaaaaah mi sento proprio un ignorante, possibile che non io non ci arrivi da solo?
So che sono "cavolate", ma con mootools e fx in generale non ne ho mai avuto a che fare, neanche javascript se per quello.
Sono impiantato e ho fatto circa 100 modifiche di cui nemmeno una funzionante.
Ho scaricato da mootools.net questo js: MooTools 1.2 - mootools-1.2-core-yc.js e l'ho messo al posto di quei 3 che c'erano prima.
Poi, ho inserito tra gli <head> come da tuo consiglio

var fx;

window.addEvent('domready', function(){
fx = new Fx.Opacity('container', {duration: 500});
})

window.addEvent('load', function(){
fx.hide();
});

window.addEvent('unload', function(){
fx.show();
});

ma niente. non funge.
Ho cercato nella documentazione e ho modificato poi la funzione così:

var fx;

window.addEvent('domready', function(){
fx = new Fx.Opacity('container', {duration: 500});
})

window.addEvent('load', function(){
fx.fade('out');
});

window.addEvent('unload', function(){
fx.fade('in');
});

Non va comunque.
Che ignorante che sono!

La pagina aggiornata è sempre QUI

**artorius** · 24-07-2008, 23:59

Perchè non si chiama più opacity ma Fx.Tween

var fx;

window.addEvent('domready', function(){
fx = new Fx.Tween('container', {duration: 500});
})

window.addEvent('load', function(){
fx.start('opacity', 0);
});

window.addEvent('unload', function(){
fx.start('opacity', 1);
});

**-AA-** · 11-08-2009, 15:40

Scusate mi aggancio a questa discussione, pure io avrei bisogno di fare un fade out e un fade in ad ogni cambio pagina, ho visto che la discussione tratta proprio questo argomento, ho applicato lo script postato in una pagina test ma senza ottenere risultati

**Xinod** · 11-08-2009, 15:54

Originariamente inviato da -AA-
Scusate mi aggancio a questa discussione

no, leggi il regolamento!
o ti aggangi a discussione pertinente possibilmente non troppo antica
o ne apri una nuova

Discussione: Dissolvenza nel cambio pagina

Strumenti discussione

Ricerca discussione

Visualizza

Dissolvenza nel cambio pagina

Permessi di invio