Ho un cliente con un sito di pianificazione di eventi che chiede che le sue pagine si sbiadiscano l'una nell'altra. Non ho idea di come posso farlo. Qualche idea? C'è comunque da fare senza flash?Come si dissolve una pagina HTML mentre un'altra si dissolve?
Sicuramente entrare in possesso di un framework javascript. jQuery è popolare (perché è un asso), ma ci sono Mootools, Prototype e Dojo per nominarne alcuni.
Non sono sicuro se la dissolvenza incrociata può essere eseguita in modo affidabile su tutti i browser senza artefatti scoppiettanti/saltellanti. Anche l'esempio che Dancrumb indica è un po 'strano (nessun insulto intendeva Dan).
Process-saggio, si potrebbe avere 3 strati (dall'alto in basso)
quando l'utente prova a navigare verso la seconda pagina, caricarlo nel contenitore usando ajax. Una volta caricata la pagina, inizia a dissolvere lo schermo. Una volta che lo schermo è al 100% di opacità, manipola il DOM per spostare il contenuto caricato fuori dal contenitore nascosto e in quello che ora è la seconda pagina, quindi inizia a svanire di nuovo lo schermo.
EDIT su un sidenote - vorrei evocare tutta la mia webdev mojo e cercare di convincere il cliente quello che cattiva idea è di avere pagina completa sfuma su un sito progettato per comunicare le informazioni. Ovviamente conosco la dolce FA di questo progetto, quindi sentitevi liberi di prendermi a schiaffi; ma non ho mai visto un caso in cui effetti e transizioni fantasiose abbiano migliorato l'usabilità di un sito quando usato a livello di pagina. So che mi irriterebbe se dovessi aspettare una transizione elegante per finire prima che potessi continuare a navigare ...
+1, in particolare per il sidenote – sleske
Se è un effetto rapido, come 0.5s, non sono d'accordo ... Windows ha dei menu animati e minimizza.massimizzare la funzionalità come fa MacOS (in realtà più così). –
I menu di apertura e la visualizzazione min/max di uno schermo sono interazioni totalmente diverse per la navigazione di una pagina ..., – Mathew
È possibile caricare il contenuto utilizzando una richiesta AJAX e quindi utilizzare javascript per sfumare una pagina e sfumare nell'altra? In jQuery, qualcosa sulla falsariga di:
$.get('newpage.html', {}, function(res){
$('#content-container').fadeOut().html(res).fadeIn();
});
perfetto, ma è un passo nella giusta direzione si spera? Questo non è davvero qualcosa di HTML è stato fatto per ...
Grazie, Joe
Transizioni di pagina sono supportati in modo nativo con IE, utilizzando il tag META. Vedere la Microsoft page about Filters and Transitions per più
Per un approccio del browser agnostica (utilizzando Javascript), vedere this Stack Overflow question
Hai un link per la roba di IE? –
Nota: i filtri e le transizioni sono obsoleti a partire da IE9. – Darwyn
Non funzionerà in IE, ma WebKit e FireFox sono entrambi sulla barca con transizioni CSS, e funzionano molto più facilmente di qualsiasi JavaScript.
Questo dovrebbe funzionare, senza fare affidamento su Ajax (jQuery):
$(function(){
/*
Add this code to every page.
We start by hiding the body, and then fading it in.
*/
$('body').hide().fadeIn('fast');
/*
Now we deal with all 'a' tags...
*/
$('a').click(function(){
/*
Get the url from this anchors href
*/
var link = $(this).attr('href');
/*
Fade out the whole page
*/
$('body').fadeOut('fast', function(){
/*
When that's done (on the 'callback') send the browser to the link.
*/
window.location.href = link;
});
return false;
});
});
Degno di nota, tuttavia, è che se si sta caricando js in fondo alla pagina (come siamo spesso detto di fare), su una pagina lenta caricare la pagina potrebbe essere visibile, quindi invisibile, e quindi sfumare di nuovo in entrata ... Che sembrerebbe molto strano.
Una soluzione sarebbe semplicemente nascondere il corpo in CSS, ma potreste, possibilmente, avere visitatori con JS disattivati ma CSS attivi, quindi avranno solo una pagina vuota. In alternativa puoi usare una piccola quantità di js nella parte superiore della pagina (non facendo affidamento su jQuery) per nascondere il corpo.
Infine, tuttavia, perché? Penso che se visitassi il tuo sito questi effetti inizierebbero a infastidirmi seriamente abbastanza rapidamente. Perché non basta portare l'utente alla pagina che hanno chiesto?
prova questo plugin jQuery. è un tutorial on page transitions
Cosa succede alle pagine che contengono elementi Flash/Video o altre cose complesse? Quelli svaniranno correttamente?
Ecco un modo hacky a cui ho appena pensato. Simile alla risposta di Alex Lawford, ma speriamo un po 'meglio:
Facendo clic su un collegamento, inviare una richiesta AJAX per la nuova pagina, ma non fare nulla con la risposta. Una volta ricevuta la risposta, dissolvenza la pagina corrente, emettere un comando standard window.location = <newurl> e fare in modo che il javascript su quel lato sia nascosto e quindi sfumato nel nuovo documento.
La speranza è che la risposta della chiamata AJAX sia memorizzata nella cache, quindi il tempo tra la dissolvenza in chiusura e la dissolvenza in ingresso sarà trascurabile.
Mi limiterò a ripetere dalla prima frase: questo è hacky.
Questo potrebbe essere un po 'in ritardo, ma per Dissolvenza di una pagina in quando si carica, e quindi si dissolvono Facendo clic su Si consiglia di utilizzare jQuery. Ho scritto questo breve script che farà il trucco del tuo dopo. Dai un'occhiata, e ti spiegherò di seguito.
Il CSS
body { display:none; }
Il JS
$(document).ready(function()
{
$('body').fadeIn("slow", 0.0);
$('body').fadeIn("slow", 0.1);
$('body').fadeIn("slow", 0.2);
$('body').fadeIn("slow", 0.3);
$('body').fadeIn("slow", 0.4);
$('body').fadeIn("slow", 0.5);
$('body').fadeIn("slow", 0.6);
$('body').fadeIn("slow", 0.7);
$('body').fadeIn("slow", 0.8);
$('body').fadeIn("slow", 0.9);
$('body').fadeIn("slow", 1.0);
$('a').click(function(){
$('body').fadeOut();
setTimeout("nav('"+this.href+"')",1000);
return false;
});
});
function nav(href){
location.href=href;
};
Il CSS trattiene la visualizzazione del corpo, che permette al JS per avviare l'effetto di dissolvenza carico della pagina. Il body fadeIn è impostato ad intervalli per consentire un effetto di dissolvenza più uniforme, dando al sito il tempo di caricarsi. Ho impostato l'effetto fadeOut da attivare quando si fa clic su qualsiasi collegamento di ancoraggio (è possibile cambiarlo come si desidera agire come trigger di dissolvenza). Quando la pagina si affievolisce, si dissolverà in modo molto simile a uno schermo 'Bianco'. Per evitare ciò, imposta il tuo colore di sfondo HTML su qualsiasi HEX in modo che corrisponda al colore del sito.
Quella sceneggiatura è probabilmente la soluzione migliore e più rapida da eseguire su qualsiasi sito. È stato testato su IE7-8, FF 3+ e Opera 9-10 e funziona come un fascino. Godere!
Le pagine di transizione di dissolvenza sembrano sempre un "odore di interfaccia utente Web" per me. – Pierreten
Non sono d'accordo in linea di principio è un'idea sbagliata, ma come funzionerà in pratica quando un carico di pagina impiega diversi secondi? Normalmente una pagina viene caricata in modo incrementale man mano che ogni immagine/parte viene ricevuta, dovrai aspettare l'intera pagina, inclusi gli elementi flash da caricare prima di iniziare la dissolvenza? –
@John - Ajax può risolvere questo problema. Mostra una piccola gif di caricamento mentre la pagina viene caricata -> dissolvenza in apertura/chiusura. –