¿Cómo deslizar toda la página web?

Por ejemplo, http://www.tumblr.com

Cierre la session e intente hacer clic en los botones "Iniciar session", "Registrarse", "30 razones por las que le encantará Tumblr" (especialmente interesante).

¿Cómo crear este efecto de diapositiva?

PD: No estoy pidiendo que me proporcione código de trabajo, solo pautas y consejos.

UP: parece que encontré la posible solución. Código de los files tumblr js.

return new Effect.Move(element, { x: initialMoveX, y: initialMoveY, duration: 0.01, beforeSetup: function(effect) { effect.element.hide().makeClipping().makePositioned(); }, afterFinishInternal: function(effect) { new Effect.Parallel( [ new Effect.Opacity(effect.element, { sync: true, to: 1.0, from: 0.0, transition: options.opacityTransition }), new Effect.Move(effect.element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition }), new Effect.Scale(effect.element, 100, { scaleMode: { originalHeight: dims.height, originalWidth: dims.width }, sync: true, scaleFrom: window.opera ? 1 : 0, transition: options.scaleTransition, restreAfterFinish: true}) ], Object.extend({ beforeSetup: function(effect) { effect.effects[0].element.setStyle({height: '0px'}).show(); }, afterFinishInternal: function(effect) { effect.effects[0].element.undoClipping().undoPositioned().setStyle(oldStyle); } }, options) ); } 

Encontrará una demostración funcional de una diapositiva de página completa aquí: http://acarna.com/full-page-slide.php

Ver la fuente y el CSS ya que ambos son obligatorios para que esto funcione. Las keys principales a tener en count son …

  • Necesita un contenedor en el que se tengan 2 (o más) páginas del tamaño de la pantalla (# envoltorio en mi demostración)
  • Este contenedor debe tener su propiedad de desbordamiento establecida en oculto
  • Debe detectar la altura de la pantalla cada vez que ejecuta la animation (en caso de que el tamaño de la window haya cambiado)

¿Has revisado los scripts y los css que usaron en sus páginas? solo compruébalo obtendrás la key de cómo hacerlo.

Hice este efecto en mi propio sitio también. No sé cómo lo hizo tumblr, pero he descubierto mi propia forma de hacer esto (para el efecto de tumblr como ejemplo):

paso 1. antes de networkingirigir a una nueva url, deslice la sección inferior hacia arriba de la página actual
paso 2. desliza hacia abajo la sección superior cuando el nuevo documento de url. listo


Actualización años después:

Como acabo de recibir una nueva votación, descubrí esta vieja respuesta que ahora está un poco desactualizada.

Con javascript moderno, solo necesita usar history.pushstate , todos los efectos se realizan en una página. Después de cambiar el contenido de la página con js, puede usar el estado de empuje para cambiar la url, lo que lo hace como navegar con los efectos.

Para leer más sobre pushstate, consulte https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history