Efecto slider para contenido en

paginas web
Estas en el tema de Efecto slider para contenido
en paginas web en el foro de HTML en Foros del
Web. 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 ...
#1 (permalink)
03/04/2012, 04:36

Fecha de Ingreso: agosto-

guardianglorios 2006
Mensajes: 174
o Antigedad: 11 aos, 1 mes
Puntos: 2
Efecto slider para contenido en paginas web

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

#2 (permalink)
03/04/2012, 09:08

Fecha de Ingreso: abril-2012

Ubicacin: Rosario
PabloNeirotti Mensajes: 3
Antigedad: 5 aos, 5 meses
Puntos: 0
Respuesta: Efecto slider para contenido en
paginas web

Entiendo...

Para estar en claros, lo que decs se tiene que hacer si

o si en modalidad Aplicacin Web (es decir, no
refrescar la pgina cada vez que entrs a un link.
Usar #!/ para hacer permalinks).

Lo que yo hara es usar Keyframes, aunque buena

suerte, lo soportan Gecko y WebKit no ms (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

quers que ingrese a pantalla, y 'slide-out-left' al que
quers que abandone la pantalla.

Cuando quers 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 sera:

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 funcin la llams pasndole el objeto

que entra (obj_in) y el objeto que se debera ir
(obj_out). Ejemplo:

slideInOut($('#contacto'), $('#portada')); // Entra a

pantalla Contacto, y la Portada del sitio se va.

Te lo hara ms ptimo, que encuentre solo el objeto

que debera irse, pero no quiero obligarte a seguir un
markup en particular.

Espero que te sirva.

Saludos!
#3 (permalink)
04/04/2012, 05:52

guardianglorios Fecha de Ingreso: agosto-

2006
o Mensajes: 174
 Antigedad: 11 aos, 1 mes
Puntos: 2
Respuesta: Efecto slider para contenido en
paginas web

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.
#4 (permalink)
04/04/2012, 20:51

Fecha de Ingreso: abril-2012

Ubicacin: Rosario
PabloNeirotti Mensajes: 3
Antigedad: 5 aos, 5 meses
Puntos: 0
Respuesta: Efecto slider para contenido en
paginas web

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 mo, 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 ecuacin, ni
la versin 6. Ofrecele esta solucin, si no pueden ir a
algo ms conservador, ms esttico, que funcione en
IE.

Cuanto ms te apoys en HTML5, ms pods hacer,

mejor y en menos tiempo, pero el resultado es ms
estricto, requiriendo que sea un browser actualizado,
no uno cualquiera.

Espero que sirva para reflexionar qu enfoque darle!

#5 (permalink)
09/04/2012, 10:20

Fecha de Ingreso: marzo-2012

Ubicacin: Bogot
huertas87 Mensajes: 70
Antigedad: 5 aos, 5 meses
Puntos: 2
Respuesta: Efecto slider para contenido en
paginas web

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 solucin que creo adecuada sera utilizar jquery
IU (No s si lo has utilizado) igual es muy fcil,
como lo siguiente:

Cdigo HTML:
<!--Lo primero que debes hacer es insertar las libreras necesarias-->

<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></s
cript>
<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...

Cdigo 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 accin de ocultar y
mostrar me imagino que debe ser un botn.
#6 (permalink)
09/04/2012, 13:53

Fecha de Ingreso: agosto-

2011
NewbPH Ubicacin: Las Garzas
Mensajes: 37
P Antigedad: 6 aos
Puntos: 0
Respuesta: Efecto slider para contenido en
paginas web

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

Cita:
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 podra encontrarlo..
Gracias.!
#7 (permalink)
09/04/2012, 14:14

Fecha de Ingreso: marzo-2012

Ubicacin: Bogot
huertas87 Mensajes: 70
Antigedad: 5 aos, 5 meses
Puntos: 2
Respuesta: Efecto slider para contenido en
paginas web

Cita:
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 podra encontrarlo..
Gracias.!
As es, es una galera de imagenes hecha con jquery,
una forma sencilla de hacerla es como ya explique
anteriormente, tambin hay diversas formas de
hacerla un poco ms complejas.
#8 (permalink)
 10/04/2012, 05:27

Fecha de Ingreso: agosto-

guardianglorios 2006
Mensajes: 174
o Antigedad: 11 aos, 1 mes
Puntos: 2
Respuesta: Efecto slider para contenido en
paginas web

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!!!
#9 (permalink)
10/04/2012, 11:54
 Fecha de Ingreso: marzo-2012
Ubicacin: Bogot
huertas87 Mensajes: 70
Antigedad: 5 aos, 5 meses
Puntos: 2
Respuesta: Efecto slider para contenido en
paginas web

Si, si tienes varios contenidos sera mejor que los

tuvieras todo dentro del mismo documento html,
nombrandolos con un ID como lo has hecho con
"contenido", y los dems iran ocultos.

Entonces, declaramos los id's de todos los contenidos

en nuestro documento html

Cdigo 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 dems

los ocultamos con display:none

Cdigo 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

Cdigo:
<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>