Tengo un cliente con un sitio de planificación de eventos que pide que sus páginas se desvanezcan entre sí. No tengo idea de cómo puedo lograr esto. ¿Algunas ideas? ¿Hay alguna forma de hacerlo sin flash?¿Cómo se hace que una página html se desvanezca mientras otra se desvanece?
Definitivamente hacerse con un marco de JavaScript. jQuery es popular (porque es as), pero hay Mootools, Prototype y Dojo, por nombrar algunos.
No estoy seguro de si el fundido cruzado se puede hacer de manera confiable en todos los navegadores sin artefactos de estallido/salto. Incluso el ejemplo al que Dancrumb apunta es un poco arisco (ningún insulto pretendía Dan).
Proceso-sabia, usted podría tener 3 capas (de arriba abajo)
cuando el usuario intenta navegar a la segunda página, cárguelo en el contenedor usando ajax. Una vez que la página se haya cargado, comience a desvanecerse la pantalla. Una vez que la pantalla esté al 100% de opacidad, manipule el DOM para mover el contenido cargado fuera del contenedor oculto y dentro de lo que ahora es la página dos, luego comience a desvanecer la pantalla nuevamente.
EDIT en una nota al margen - Convocaré todo mi webdev mojo y trataré de convencer al cliente de lo que no sé si es tener desvanecimientos completos en un sitio diseñado para comunicar información. Obviamente conozco a la dulce FA sobre este proyecto, así que siéntete libre de abofetearme; pero nunca he visto un caso donde los efectos y las transiciones de lujo hayan mejorado la usabilidad de un sitio cuando se usa en el nivel de página. Sé que me irritaría si tuviera que esperar a que termine una transición elegante para poder seguir navegando ...
+1, especialmente para la nota al margen – sleske
Si se trata de un efecto rápido, como 0.5s, entonces no estoy de acuerdo ... Windows tiene buenos menús animados y minimiza.maximice la funcionalidad como hace MacOS (de hecho más-tan). –
Los menús de apertura y mín./Máx. -imitar una pantalla son interacciones totalmente diferentes a la navegación por una página ..., – Mathew
¿Podrías cargar el contenido usando una solicitud AJAX y luego usar javascript para fundir una página y fundirla en la otra? En jQuery, algo a lo largo de las líneas de:
$.get('newpage.html', {}, function(res){
$('#content-container').fadeOut().html(res).fadeIn();
});
perfecto, pero es un paso en la dirección correcta con suerte? Esto no es realmente algo de HTML se hizo para ...
Gracias, Joe
Transiciones de página son compatibles de forma nativa con el IE, usando la etiqueta META. Ver el Microsoft page about Filters and Transitions para más
Para un enfoque agnóstico navegador (usando Javascript), ver this Stack Overflow question
¿Tienes un enlace para las cosas de IE? –
Nota: Los filtros y las transiciones están en desuso a partir de IE9. – Darwyn
No funcionará en IE, pero WebKit y FireFox están ambos en el barco con transiciones CSS, y funcionan mucho mejor que cualquier JavaScript.
Esto debería funcionar, sin depender de 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;
});
});
A tener en cuenta sin embargo es que si va a cargar js en la parte inferior de la página (ya que estamos a menudo se le pide que lo haga), en una carga lenta de la página la página puede ser visible, luego invisible, y luego desvanecerse de nuevo ... Lo que se vería muy extraño.
Una solución sería simplemente ocultar el cuerpo en CSS, pero es posible que los visitantes con JS apagados pero con CSS activado, entonces solo tendrán una página en blanco. Alternativamente, puede usar una pequeña cantidad de js en la parte superior de la página (sin depender de jQuery) para ocultar el cuerpo.
Por último, ¿por qué? Creo que si visitara su sitio, estos efectos comenzarían a molestarme seriamente bastante rápido. ¿Por qué no simplemente lleva al usuario a la página que solicitó?
prueba este plugin jQuery. es un tutorial on page transitions
¿Qué sucede con las páginas que contienen elementos Flash/Video u otras cosas complejas? ¿Se desvanecerán correctamente?
Aquí hay una forma hacky en la que he pensado. Similar a la respuesta de Alex Lawford, pero con suerte un poco mejor:
Al hacer clic en un enlace, envíe una solicitud AJAX para la nueva página, pero no haga nada con la respuesta. Una vez que reciba la respuesta, desvanezca la página actual, emita un comando estándar window.location = <newurl> y tenga javascript en ese lado que se oculte inmediatamente y luego se desvanezca en el nuevo documento.
La esperanza aquí es que la respuesta de la llamada AJAX se almacena en caché, por lo que el tiempo transcurrido entre el fundido de salida y la atenuación será insignificante.
Sin embargo, voy a reiterar la primera frase: esto es hacky.
Esto puede ser un poco tarde, pero para Fundir una página Cuando se carga y luego se desvanece Con un clic, sugeriría usar jQuery. Escribí este pequeño guión rápido que hará el truco que su posterior. Eche un vistazo y lo explicaré a continuación.
El CSS
body { display:none; }
El 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;
};
El CSS detiene la visualización del cuerpo, lo que permite que la JS para iniciar el efecto de fundido en carga de la página. El cuerpo fadeIn se configura a intervalos para permitir un efecto de fundido más suave, lo que le da tiempo al sitio para cargar. Establecí el efecto fadeOut para que se dispare cuando se hace clic en cualquier enlace de ancla (puede cambiarlo como lo desee para actuar como disparador de fundido de salida). Cuando la página se desvanece, lo más probable es que se desvanezca a una pantalla "Blanca". Para evitar esto, configure su color de fondo HTML en cualquier HEX para que coincida con el color del sitio.
Ese script ahí mismo es probablemente la mejor solución y el más rápido para implementar en cualquier sitio. Ha sido probado en IE7-8, FF 3+ y Opera 9-10 y funciona como un encanto. ¡Disfrutar!
Las páginas de transición de transición siempre me parecen un "olor a UI web". – Pierreten
No estoy de acuerdo, en principio, es una idea equivocada, pero ¿cómo funcionará esto en la práctica cuando una carga de página demora varios segundos? Normalmente, una página se carga incrementalmente a medida que se recibe cada imagen/pieza, ¿tendrá que esperar a que se cargue toda la página, incluidos los elementos flash antes de iniciar el fundido? –
@John - Ajax puede resolver este problema. Muestre un pequeño archivo de carga mientras se carga la página -> entrada/salida gradual. –