como logro este efecto de corredera con css?

Remy_Lebaut · #1 (**permalink**) 06/09/2013, 05:11

Saludos a todos, no se si estoy posteando en la sección correcta pero si esta mal, por favor muevan este tema!

Mi problema es que quiero crear un efecto con css y alguna imagenes y el efecto seria asi...

Quisiera poner en una linea 8 imagenes pequeñas alineadas una junto a la otra, pero que solo sean visibles 4 de las 8 imagenes. Pero que al pasar el mouse al final de la cuarta imagen esta se mueva en conjunto a las demas visibles hacia un costado haciendo aparecer las otras cuatro imagenes que estaban invisibles.

Bueno se los explico asi porque estube buscando como se llama esto pero no alle nada, Ademas es un efecto que vi en algunos reproductores de video online de antes, donde al finalizar el video te ponia abajo cuatro recuadritos y al pasar el mouse salian mas cuadritos de videos y bueno quisiera hacer algo asi con css, pero como es tan extraño no se ni por donde empezar.

Si pudieran darme alguna pista para comenzar se los agradecería..

Saludos!

ArturoGallegos · #2 (**permalink**) 06/09/2013, 13:59

no estoy seguro si lo que quieres es que el contenedor crezca par mostrar las 8 imágenes, si quieres que se oculten las primeras 4 y muestre las 4 restantes mientras esta el hover activo.

o bien necesitas un carrusel jquery.... yo creo que es esto ultimo, checa este.
http://caroufredsel.dev7studios.com/

Remy_Lebaut · #3 (**permalink**) 06/09/2013, 16:15

Primeramente gracias por mirar mi tema..

Se complica un poco cuando uno no sabe bien como se llama tal cosa jaja!

Lo del carrusel que me distes es algo parecido pero no lo que quiero. Voy a dar un ejemplo de lo que masomenos quiero.

En este sitio de video http://www.break.com/video/mirrors-trailer-545265 se puede apreciar una tira de imágenes que corren dentro de un contenedor y al hacer click en la flecha que esta al final los videos corren como si fuera una corredera...

Bueno si lo miramos con detenimiento ese contenedor tiene muchas imágenes con link que estan invisibles pero que se dejan ver al momento de clickear en la flecha de la derecha.

Yo quisiera lograr algo asi pero con iconos y solo mostrando 4. pero que al desplazarse de manera horizontal aparezcan otros 4 mas.

Bueno espero haber podido explicarme bien, pero no pude encontrar nada parecido, pero lo he visto en el pasado pero hoy en dia trato de buscar algo así almenos para dar un ejemplo pero no encontré así que esa es mi explicasion!

ArturoGallegos · #4 (**permalink**) 06/09/2013, 16:26

pues esperemos que venga alguien con mejor entendimiento que yo, el link que me pasaste veo un cuadro como dices pero no hace nada de hecho la pagina en si no me funciona con ningún navegador.

Aun así por lo que describes, para mi es un carrusel incluso si ves el link que te di hay algo como lo que describes en la parte de abajo, no es forzoso que gire automáticamente, puede ser al dar clic en un icono y pasar a las siguientes.

En fin suerte amigo y ojala alguien le atine a lo que buscas.

pzin · #5 (**permalink**) 07/09/2013, 02:04

Es simplemente un slider/carrusel, lo que en lugar de mostrar una imagen como suele ser habitual, muestra varios elementos.

Remy_Lebaut · #6 (**permalink**) 07/09/2013, 10:18

Si eso es amigo, ahora se como se llama el efecto, Slider Carrusel... al tirarlo en google encontre un rapido ejemplo de lo que yo quiero.

http://www.ajaxshake.com/demo/ES/864/e3efef6d/carrusel-jquery-ui-jcoverflip.html

Alli hay un carrusel que se mueve con un zoom en el centro que esta muy bueno, lo unico que me gustaria es que no dependa de esa barrita que esta abajo y hace que se mueva.

Se podria hacer el slider al aproximar el mouse al final de esa tira de imagenes?

Remy_Lebaut · #7 (**permalink**) 13/09/2013, 13:05

Nadie sabe como crear un carrusel como el que estoy intentando conseguir?

Remy_Lebaut · #8 (**permalink**) 12/10/2013, 10:45

Alguien conoce algún tutorial para crear un SliderCarrusel para lo que necesito hacer... Ya llevo mucho tiempo esperando una respuesta pero nadie parece saber como se hace este efecto.

ArturoGallegos · #9 (**permalink**) 12/10/2013, 11:27

a estas alturas ubiera pensado que ya lo habias solventado.

aqui tienes un ejemplo revisa su codigo seguro te sirve
bit.ly/fkWywH

aca tienes otro.... una simple busqueda me ha dado varios resultados ?¿ prueba usa mas el buscador de google
fijate en como funciona el evento onclic de este y estudialo para que entiendas y sepas como cambiarlo por mouseover
http://caroufredsel.dev7studios.com/...tom-events.php

// este link es de algo de informacion que puede serte utili con el link anterior
http://caroufredsel.dev7studios.com/custom-events.php

nota: aparte no has sido muy activo en el foro... ayuda a otros para que tambien te ayuden a ti, los tiros deben ir en ambos sentidos.
por cierto la busqueda que realice fue -> jquery carousel scroll on hover

IsaBelM · #10 (**permalink**) 13/10/2013, 15:17

no era necesario buscar en otros sitios. en este foro se puede encontrar ese efecto

envuelve estas líneas

Cita:

var clonarImagen = slider.getElementsByTagName('img')[0].cloneNode(true);
slider.appendChild(clonarImagen);
slider.removeChild(slider.getElementsByTagName('im g')[0]);

con un ciclo

Cita:

for (var i = 0; i < 4; i++) {
var clonarImagen = slider.getElementsByTagName('img')[0].cloneNode(true);
slider.appendChild(clonarImagen);
slider.removeChild(slider.getElementsByTagName('im g')[0]);
}

donde 4 es el número de elementos que serán mostrados, clonados y eliminados a cada invocación. también has de editar un poco el css para adaptar el bloque .slider al número de imágenes que quieres que sean mostradas

Remy_Lebaut · #11 (**permalink**) 13/10/2013, 15:59

Que bien muchas gracias, por fin encuentro lo que quiero...
Hay que entender que es difícil encontrar lo que se necesita cuando uno no sabe como se llama, con el nombre es fácil hallar el material, esa es la razón de acudir a gente que mas sabe...

Les agradezco mucho por su ayuda, ahora mismo voy a probar con el DW haber que tal me va...