[SOLUCIONADO] codigo CSS slider

VictorJota · #1 (**permalink**) 08/05/2013, 13:45

Muy buenas a todos,

Por adelantado gracias por la ayuda. Es la primera vez que posteo algo, y también mi primera vez como "desarrollador web". Quiero decir que soy novato, así que no seáis muy duro conmigo.
Estoy creando la web de mi propia empresa, y estoy utilizando un efecto slider que pongo a continuación:

html en la página:

<div id="montage-wrap">
<div class="montage-block"> <span id="block1"></span>
<div class="thumb_content">
<p style="font-size: 22px;">socios fundadores </p>
<p><a href="xxxx.html">xxxxxxxxxxxxxxxx</a></p>
<p><a href="xxxx.html">xxxxxxxxxxxxxxxx</a></p>
<p><a href="xxxx.html">xxxxxxxxxxxxxxxx</a></p>
</div>
</div>
</div>

css en la hoja de estilos:

#montage-wrap {

width: 820px;
height: 214px;
}

.montage-block {

width: 274px;
height: 214px;
float: left;
display: block;
overflow: hidden;
position: relative;
margin: 0 4px 0 0;
background-color: #20552a;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #d6d6d6;
border-right-color: #d6d6d6;
border-bottom-color: #d6d6d6;
border-left-color: #d6d6d6;

}

.montage-block:last-child {

margin: 0;

} /* removes margin on last block */

#block1 {

width: 274px;
height: 214px;
position: absolute;
display: block;
background: url("../images/picture1.jpg") no-repeat;
-webkit-transition: top .7s ease-in-out;

Con esto consigo que al aproximar el cursor a la imagen, esta suba con un efecto slider y me deja ver el texto de atrás.

La cuestión es que con el -webkit-transition: top .7s ease-in-out; solo consigo que funcione en chrome y safari, y quiero que funcione en todos los navegadores.
Me gustaría que me explicasen que tengo que añadir para conseguirlo.

Gracias

alberto510a · #2 (**permalink**) 08/05/2013, 14:01

Hola con jQuery puedes conseguir esto de forma sencilla si quieres o sino aquí te dejo un manual para que veas como se hacen transiciones en CSS más avanzadas:

http://www.desarrolloweb.com/manuales/css3.html

Desde el artículo 20 al final es todo de animaciones.

Saludos.

pzin · #3 (**permalink**) 08/05/2013, 16:00

Las transiciones de CSS no funcionan en IE9. Usa transition a secas para IE10 y Firefox.

Aquí tienes una tabla de compatibilidad: http://caniuse.com/css-transitions

Y bienvenido al foro.

alberto510a · #4 (**permalink**) 08/05/2013, 16:07

Gracias por el dato yo tampoco sabía eso pzin creía que esas normales si funcionaban.

Entonces te recomiendo jQuery VictorJota eso CREO que si te servirá jeje.

Saludos

VictorJota · #5 (**permalink**) 09/05/2013, 03:28

Cita:

Iniciado por pzin

Las transiciones de CSS no funcionan en IE9. Usa transition a secas para IE10 y Firefox.

Aquí tienes una tabla de compatibilidad: [url]http://caniuse.com/css-transitions[/url]

Y bienvenido al foro.

Muchas gracias a todos por tan rápida contestación. El caso es que ya había probado utilizar transition, colocado en la hoja css justo después de -webkit-transition: top .7s ease-in-out; quedando de esta manera;

#block1 {

width: 274px;
height: 214px;
position: absolute;
display: block;
background: url("../images/picture1.jpg") no-repeat;
-webkit-transition: top .7s ease-in-out;
transition-property:height;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:0s;
}

Lo primero hay alguna cosa rara, ya que transition no me deja usar top, como uso con webkit-transition, he de poner height.
Podéis probar que esto funciona en la siguiente página:

http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transition4

pegando el siguiente código:

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:200px;
background:red;
transition-property:height;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:0s;

}

div:hover
{
height:100px;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

El efecto se produce, pero no es exactamente como yo lo tengo en mi página. Yo declaro una clase en la página html, a la que asigno el id block, como sigue:

<div id="montage-wrap">
<div class="montage-block"> <span id="block1"></span>
<div class="thumb_content">
<p style="font-size: 22px;">socios fundadores </p>
<p><a href="nosotros.html">Víctor García Castro</a></p>
<p><a href="nosotros.html">Jesús Carrero Riolobos</a></p>
<p><a href="nosotros.html">Pedro Fernández Ramírez</a></p>
</div>
</div>
</div>

Despues en la hoja de estilo css, el id block tiene asignado una imagen que es a la que le aplico el efecto de transition:

.montage-block:hover #block1 {

top: -215px;
}

el id block es que el tiene el efecto como digo

#block1 {

width: 274px;
height: 214px;
position: absolute;
display: block;
background: url("../images/picture1.jpg") no-repeat;
-webkit-transition: top .7s ease-in-out;
}

y mi pregunta es si puedo añadir el efecto para que funcione en firefox, opera y ie10, si modificar ni la hoja ni la forma en que la he configurado, simplemente añadiendo transition como decia antes.

Siento ser tan torpe, pero os comenté que estoy empezando, que en realidad esta es mi primera inclusión en la programación web.

Alguna idea......

pzin · #6 (**permalink**) 09/05/2013, 04:22

Intenta poner el código con highlight o code.

Usa transition de la misma forma que usas -webkit-transition, porque es lo mismo. De hecho la última versión de Chrome te leerá transition:

Código CSS:

Ver original-webkit-transition: top .7s ease-in-out; 
transition: top .7s ease-in-out;

Luego tienes cosas por ahí como prefixfree, para automatizar el proceso de los prefijos propietarios.

VictorJota · #7 (**permalink**) 09/05/2013, 04:58

Cita:

Iniciado por pzin

Intenta poner el código con highlight o code.

Usa transition de la misma forma que usas -webkit-transition, porque es lo mismo. De hecho la última versión de Chrome te leerá transition:

Código CSS:

Ver original-webkit-transition: top .7s ease-in-out; 
transition: top .7s ease-in-out;

Luego tienes cosas por ahí como [URL="https://github.com/LeaVerou/prefixfree"]prefixfree[/URL], para automatizar el proceso de los prefijos propietarios.

Gracias pzin,

El código que utilizo lo encontré aquí:

http://www.cssreset.com/create-killer-sliding-boxes-with-css3/

He probado poniendo solo transition y no funciona, ni en chrome ni en firefox. Evidentemente que mi opinión no es la de un experto, y por lo tanto puede que sea "absurda", pero me parece una forma sencilla de tener un efecto sin recurrir a un script.
El caso es que tal como lo tengo, en chrome funciona, y no me explico porqué en los demás no puedo conseguir que funcione, usando la misma estructura, y añadiendo transition tal como se supone que funciona.

¿puede que se la forma en que está hecho el código? es decir, para que funcione en los demas navegadores, tengo que cambiar si o si la estructura del código?

Gracias

pzin · #8 (**permalink**) 09/05/2013, 05:34

Si lo pones así, tal cual:

Código CSS:

Ver original-webkit-transition: top .7s ease-in-out; 
-moz-transition: top .7s ease-in-out; 
-o-transition: top .7s ease-in-out; 
transition: top .7s ease-in-out;

Debería de funcionar en, al menos, IE10, Opera, Chrome, Safari y Firefox.

VictorJota · #9 (**permalink**) 09/05/2013, 08:54

Cita:

Iniciado por pzin

Si lo pones así, tal cual:

Código CSS:

Ver original-webkit-transition: top .7s ease-in-out; 
-moz-transition: top .7s ease-in-out; 
-o-transition: top .7s ease-in-out; 
transition: top .7s ease-in-out;

Debería de funcionar en, al menos, IE10, Opera, Chrome, Safari y Firefox.

Pues no funciona, añadiendolo a la hoja css. No se porqué puede ser. Te dejo la página con sus hojas, y puedes probarlo con chrome y verás que funciona, y con el resto no. Estoy trabajando con bluegriffon. Por favor, si ves que el codigo es una chapuza no me lo tengas en cuenta, soy novato.
Gracias

http://ubuntuone.com/3aGRpnjTpHSleqThU3YQ24

VictorJota · #10 (**permalink**) 11/05/2013, 12:06

Alguien puede ayudarme con esto........(en el comienzo del hilo)

Gracias

pzin · #11 (**permalink**) 11/05/2013, 12:48

Intenta subirlo a algún sitio para verlo in situ.

VictorJota · #12 (**permalink**) 12/05/2013, 03:22

Cita:

Iniciado por pzin

Intenta subirlo a algún sitio para verlo in situ.

Aqui tienes el proyecto

http://ubuntuone.com/3aGRpnjTpHSleqThU3YQ24

Gracias

pzin · #13 (**permalink**) 12/05/2013, 03:27

Lo de in situ venía precisamente porque no pensaba descargarme nada.

VictorJota · #14 (**permalink**) 13/05/2013, 08:23

Cita:

Iniciado por pzin

Lo de in situ venía precisamente porque no pensaba descargarme nada.

Pensé que sería mejor que vieras todos los archivos (html y css), pero bueno....

Puedes ver la paǵina en www.idealos.es.

Es la página de inicio la que de momento tiene el efecto slider en las fotos.

Gracias

pzin · #15 (**permalink**) 13/05/2013, 18:45

El problema es que no tienes definido un valor top como inicio. Añádeselo a #block1, #block2 y #block3. O...

Si quieres que te quede más curioso, por si algún día le cambias las medidas y no tener que volver a cambiarlas, y también para no tener que volver a repetir las mismos atributos y valores para cada una de los elementos, podrías simplificar tu código a algo así:

Código CSS:

Ver original.montage-block > span { 
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0; 
  background-repeat: no-repeat;
  -webkit-transition: top .7s ease-in-out; 
  -moz-transition: top .7s ease-in-out; 
  -o-transition: top .7s ease-in-out; 
  transition: top .7s ease-in-out; 
}
 
  span#block1 { background-image: url("../images/picture1.jpg"); }
  span#block2 { background-image: url("../images/picture2.jpg"); }
  span#block3 { background-image: url("../images/picture3.jpg"); }
 
.montage-block:hover > span { 
  top: -215px; 
}

Así si quieres cambiar algo, no tienes que volver a cambiarlo en tres sitios distintos. Además de que te queda un código más reducido y curioso.
Luego tampoco tienes que especificar ningún ancho o alto, ya que tomará el ancho que tenga el elemento padre.

VictorJota · #16 (**permalink**) 14/05/2013, 01:31

Cita:

Iniciado por pzin

El problema es que no tienes definido un valor top como inicio. Añádeselo a #block1, #block2 y #block3. O...

Si quieres que te quede más curioso, por si algún día le cambias las medidas y no tener que volver a cambiarlas, y también para no tener que volver a repetir las mismos atributos y valores para cada una de los elementos, podrías simplificar tu código a algo así:

Código CSS:

Ver original.montage-block > span { 
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0; 
  background-repeat: no-repeat;
  -webkit-transition: top .7s ease-in-out; 
  -moz-transition: top .7s ease-in-out; 
  -o-transition: top .7s ease-in-out; 
  transition: top .7s ease-in-out; 
}
 
  span#block1 { background-image: url("../images/picture1.jpg"); }
  span#block2 { background-image: url("../images/picture2.jpg"); }
  span#block3 { background-image: url("../images/picture3.jpg"); }
 
.montage-block:hover > span { 
  top: -215px; 
}

Así si quieres cambiar algo, no tienes que volver a cambiarlo en tres sitios distintos. Además de que te queda un código más reducido y curioso.
Luego tampoco tienes que especificar ningún ancho o alto, ya que tomará el ancho que tenga el elemento padre.

Muchísimas gracias pzin,

Lo que he hecho de momento es incluir una posición top de inicio como de indicabas. Tú código me parece lo correcto, pero no me funciona los link a cada nombre que aparece en el fondo.

Gracias nuevamente.