Efecto slider para contenido en paginas web

[guardianglorioso]

Buenas gente,

Tengo una duda. Tengo que hacer una pagina web, que es bastante sencilla, es la tipica pagina web que muestre informacion acerca de un negicio (Inicio, Trabajos, Clientes, Contacta, Donde estamos...). La pagina unicamente contendra en cada una de esas paginas el contenido que quiere mostrar, informacion, y en la parte de abajo un menu de navegacion. El tema es que quiero hacer un efecto de transicion de contenido al pinchar sobre una opcion del menu, de forma que por ejemplo, el contenido que estoy viendo desaparezca por la izquierda y el nuevo contenido al que accedo aparezca por la derecha.

No se si me explico bien. No es un efecto tipo carusel de fotos con jquery, sino que al pinchar sobre el menu para acceder a otras partes de la web, me haga ese efecto de transicion.

Saludos y muchas gracias

[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!

[guardianglorioso]

Bueno la verdad que usar lo que me dices me corta bastante ya que son pocos los navegadores que lo soportan. En realidad no es una aplicacion web, simplemente es una web sencilla a la que le quiero dar cierto efectos para hacerla mas atractiva, y el cliente me ha solicitado eso que he puesto en el foro, un efecto de transicion de paginas html de izquierda a derecha o de derecha a izquierda a la hora de pulsar una opcion en el menu, como si fuera un carusel de fotos en jquery, pero con todo el contenido de una pagina.

[PabloNeirotti]

Bueno, obviamente tiene que elegir donde poner la pesa de la balanza.

En mi caso, voy siempre 100% a HTML5, el que no soporta un sitio mío, es porque tiene un browser incompatible con las especificaciones.

Claro que el caso del cliente es distinto. QUIERE que se vea hasta en IE 6 si es posible. Es muy factible que no le puedas sacar IE de la ecuación, ni la versión 6. Ofrecele esta solución, si no pueden ir a algo más conservador, más estático, que funcione en IE.

Cuanto más te apoyás en HTML5, más podés hacer, mejor y en menos tiempo, pero el resultado es más estricto, requiriendo que sea un browser actualizado, no uno cualquiera.

Espero que sirva para reflexionar qué enfoque darle!

[huertas87]

La respuesta que te ha dado PabloNeirotti es muy acertada, ya que emplea nuevas tecnologias como lo es CSS3, claro con el problema de los navegadores.

La solución que creo adecuada sería utilizar jquery IU (No sé si lo has utilizado) igual es muy fácil, como lo siguiente:

Código HTML:

<!--Lo primero que debes hacer es insertar las librerías necesarias-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

Ahora le daremos el efecto drop a tu contenido, sea una imagen, texto, video, etc...

Código HTML:

<style type="text/css">
#noUno 
{ margin: 0px;
 width: 100px;
 height: 80px;
 background: green;
 border: 1px solid black;
 position:absolute;
 }
#noDos 
{ margin: 0px;
 width: 100px;
 height: 80px;
 background: green;
 border: 1px solid black;
 position:absolute;
display:none
 }
</style>

   <script>
  $(document).ready(function() {
    
$("#noUno").click(function () {
      $(this).hide("drop", { direction: "left" }, 1000);
});

$("#noUno").click(function () {
      $("#noDos").show("drop", { direction: "rigth" }, 2000);
});

  });
  </script>
</head>

<body style="font-size:62.5%;">
  <div id="noUno"></div>
  <div id="noDos"></div>
</body> 

Como vemos el evento click esta sobre el mismo objeto el cual oculta el primer elemento y muestra el segundo con un efecto de jquery "drop", en tu caso el elemento que debe realizar la acción de ocultar y mostrar me imagino que debe ser un botón.

[NewbPHP]

Hola no se si lo que voy a preguntar viene con este tema que estoy aprendiendo y creo que si, pues Quiero que observen esta pagina

http://www.runescape.com/title.ws

Cuando entren En la Pagina Tienen un Encabezado y Quiero ver si el cambio de imagenes que hace el encabezado es con jQuery, necesito hacer algo asi ( sera muy dificil ) donde podría encontrarlo.. Gracias.!

[huertas87]

Iniciado por NewbPHP

Hola no se si lo que voy a preguntar viene con este tema que estoy aprendiendo y creo que si, pues Quiero que observen esta pagina



Cuando entren En la Pagina Tienen un Encabezado y Quiero ver si el cambio de imagenes que hace el encabezado es con jQuery, necesito hacer algo asi ( sera muy dificil ) donde podría encontrarlo.. Gracias.!

Así es, es una galería de imagenes hecha con jquery, una forma sencilla de hacerla es como ya explique anteriormente, ó también hay diversas formas de hacerla un poco más complejas.

[guardianglorioso]

Muchas gracias HUertas!!! Y antes que nada, perdon por repetir la pregunta. Se ve que habia borrado sin querer el correo que me notificaba que me habian respondido. Asi que de nuevo mil perdones, espero que no me cojas mania.

Bueno he pasado el ejemplo de tu codigo, y la verdad es que es mas o menos lo que quiero hacer o conseguir. Lo que no se como hacer es cuando por ejemplo tienes mas de dos transiciones de pantallas. En mi caso, tengo tantas paginas html con el contenido de cada uno de las secciones del menu. No se como adaptarlo, o si es mejor tener todo el contenido dentro de un mismo archivo html, en vez de tenerlo en varios.

Actualmente parte del codigo lo tengo de esta manera:


<body>

<div id="contenido">
[Aqui iria contenido de tipo texto, o una galeria de imagenes]
</div>

--Este es el menu..Sencillo que aparece en la parte inferior de la pagina
<div class="footer">
<ul id="menu-inferior">
<li><a href="index.html" style="color:#BA007C">inicio</a></li>
<li><a href="agencia.html">la agencia</a></li>
<li><a href="trabajos.html">trabajos</a></li>
<li><a href="#">soportes</a></li>
<li><a href="#">clientes</a></li>
<li><a href="#">noticias</a></li>
<li><a href="#">contacta</a></li>
</ul>
</div>

</body>


Podrias ayudarme a incrustar el codigo para las transiciones?

Muchas gracias!!!

[huertas87]

Si, si tienes varios contenidos sería mejor que los tuvieras todo dentro del mismo documento html,
nombrandolos con un ID como lo has hecho con "contenido", y los demás irían ocultos.

Entonces, declaramos los id's de todos los contenidos en nuestro documento html

Código HTML:

<body>

<div class="footer">
<ul id="menu-inferior">
<li><a id="slideContenido" href="#" style="color:#BA007C">inicio</a></li>
<li><a id="slideContenido2" href="#">la agencia</a></li>
<li><a id="slideContenido3" href="#">trabajos</a></li>
<li><a id="slideContenido4" href="#">soportes</a></li>
<li><a id="slideContenido5" href="#">clientes</a></li>
<li><a id="slideContenido6" href="#">noticias</a></li>
<li><a id="slideContenido7" href="#">contacta</a></li>
</ul>
</div>

<div id="contenido">
[Aqui iria contenido de tipo texto, o una galeria de imagenes]
</div>

<div id="contenido2">
[Aqui iria contenido de tipo texto, o una galeria de imagenes 2]
</div>

<div id="contenido3">
[Aqui iria contenido de tipo texto, o una galeria de imagenes 3]
</div>

<div id="contenido4">
[Aqui iria contenido de tipo texto, o una galeria de imagenes 4]
</div>

<div id="contenido5">
[Aqui iria contenido de tipo texto, o una galeria de imagenes 5]
</div>

<div id="contenido6">
[Aqui iria contenido de tipo texto, o una galeria de imagenes 6]
</div>

<div id="contenido7">
[Aqui iria contenido de tipo texto, o una galeria de imagenes 7]
</div>


</body> 

El primer contenido lo dejamos visible y los demás los ocultamos con display:none

Código HTML:

<style type="text/css">
#contenido 
{
 margin: 0px;
 width: 500px;
 background-color:#FFFFFF;
 height: 30px;
 border: 1px solid black;
 position:absolute;

 }
 
#contenido2 
{ 
 margin: 0px;
 width: 500px;
 background-color:#FFFFFF;
 height: 30px;
 border: 1px solid black;
 position:absolute;
 display:none;
 }
</style> 

Ahora incluimos lo eventos de jquery, ocultando los contenido que no deben aparecer hacia la izquierda y mostrando los que sí por la derecha

Código:

<script>
  $(document).ready(function() {
    
$("#slideContenido").click(function () {
      $("#contenido, #contenido2, #contenido3, #contenido4, #contenido5, #contenido6, #contenido7").hide("drop", { direction: "left" }, 300);
//Con esto ocultaremos todos los contenidos que deben desaparecer
});

$("#slideContenido").click(function () {
      $("#contenido").show("drop", { direction: "rigth" }, 1500);
});

$("#slideContenido2").click(function () {
      $("#contenido, #contenido2, #contenido3, #contenido4, #contenido5, #contenido6, #contenido7").hide("drop", { direction: "left" }, 300);
});

$("#slideContenido2").click(function () {
      $("#contenido2").show("drop", { direction: "rigth" }, 1500);
});

$("#slideContenido3").click(function () {
      $("#contenido, #contenido2, #contenido3, #contenido4, #contenido5, #contenido6, #contenido7").hide("drop", { direction: "left" }, 300);/
});

$("#slideContenido3").click(function () {
      $("#contenido3").show("drop", { direction: "rigth" }, 1500);
});

$("#slideContenido4").click(function () {
      $("#contenido, #contenido2, #contenido3, #contenido4, #contenido5, #contenido6, #contenido7").hide("drop", { direction: "left" }, 300);
});

$("#slideContenido4").click(function () {
      $("#contenido4").show("drop", { direction: "rigth" }, 1500);
});

$("#slideContenido5").click(function () {
      $("#contenido, #contenido2, #contenido3, #contenido4, #contenido5, #contenido6, #contenido7").hide("drop", { direction: "left" }, 300);
});

$("#slideContenido5").click(function () {
      $("#contenido5").show("drop", { direction: "rigth" }, 1500);
});

$("#slideContenido6").click(function () {
      $("#contenido, #contenido2, #contenido3, #contenido4, #contenido5, #contenido6, #contenido7").hide("drop", { direction: "left" }, 300);
});

$("#slideContenido6").click(function () {
      $("#contenido6").show("drop", { direction: "rigth" }, 1500);
});

$("#slideContenido7").click(function () {
      $("#contenido, #contenido2, #contenido3, #contenido4, #contenido5, #contenido6, #contenido7").hide("drop", { direction: "left" }, 300);
});

$("#slideContenido7").click(function () {
      $("#contenido7").show("drop", { direction: "rigth" }, 1500);
});

  });
  </script>

Bueno, ps espero que te sirva... si tienes alguna duda solo pregunta.


[URL="https://twitter.com/#!/Jonathanp089"]@Jonathanp089[/URL]

[guardianglorioso]

Muchas gracias Huertas!!!!

Probare esta solucion, que seguro que si es lo que estoy buscando. Cuando tenga todo montado, ya te dire cual es el resultado final y si es el que queria o no.

Muchas gracias de nuevo!!!