Efecto slider para contenido en paginas web

[PabloNeirotti]

Entiendo...

Para estar en claros, lo que decís se tiene que hacer si o si en modalidad Aplicación Web (es decir, no refrescar la página cada vez que entrás a un link. Usar #!/ para hacer permalinks).

Lo que yo haría es usar Keyframes, aunque buena suerte, lo soportan Gecko y WebKit no más (Firefox, Safari, Chrome).

@-webkit-keyframes slide-in-left {
from { -webkit-transform: translate3d(100%, 0, 0); }
to { -webkit-transform: translate3d(0, 0, 0); }
}

@-webkit-keyframes slide-out-left {
from { -webkit-transform: translate3d(0, 0, 0); }
to { -webkit-transform: translate3d(-100%, 0, 0); }
}

.slide-in-left {
-webkit-animation: slide-in-left 1s ease-in-out;
}

.slide-out-left {
-webkit-animation: slide-out-left 1s ease-in-out;
-webkit-transform: translate3d(-100%, 0, 0);
}



El tema ahora es aplicar la clase 'slide-in-left' al que querés que ingrese a pantalla, y 'slide-out-left' al que querés que abandone la pantalla.

Cuando querés que uno vuelva a ingresar, luego de ser "sacado" de la pantalla, asegurate de sacarle el 'slide-out-*', y reemplazarlo por 'slide-in-*'. En jQuery eso sería:

function slideInOut(obj_in, obj_out) {
$(obj_in).removeClass('slide-out-left').addClass('slide-in-left');
$(obj_out).removeClass('slide-in-left').addClass('slide-out-left');
}

Ahí está! Esa función la llamás pasándole el objeto que entra (obj_in) y el objeto que se debería ir (obj_out). Ejemplo:

slideInOut($('#contacto'), $('#portada')); // Entra a pantalla Contacto, y la Portada del sitio se va.

Te lo haría más óptimo, que encuentre solo el objeto que debería irse, pero no quiero obligarte a seguir un markup en particular.

Espero que te sirva.

Saludos!