Foros del Web » Creando para Internet » CSS »

Slider de fondos con Keyframes

Estas en el tema de Slider de fondos con Keyframes en el foro de CSS en Foros del Web. Buenas chicos, soy amateur en esto y tengo algunos problemillas a la hora de hacer un slider sin utilizar Jquery, tan solo haciendo uso de ...
  #1 (permalink)  
Antiguo 29/04/2015, 01:41
 
Fecha de Ingreso: abril-2015
Ubicación: Bilbao
Mensajes: 4
Antigüedad: 8 años, 11 meses
Puntos: 0
Pregunta Slider de fondos con Keyframes

Buenas chicos,

soy amateur en esto y tengo algunos problemillas a la hora de hacer un slider sin utilizar Jquery, tan solo haciendo uso de los keyframes. Creo que he puesto todo bien pero no me hace nada. Os dejo aquí parte del codigo para ver si vosotros detectais el problema porque yo llevo pegandome horas y horas y ya no se que es.

<section id="principal" class="principal">
<div id="fondos">
</div>
</section>

section.principal{

width: 100%;
height: 760px;
z-index: 0;
overflow: hidden;

}

div#fondos{
background: url(../imagenes/fondo.jpg);
background-size: cover;
height:100%;

-moz- transition: all 0.75s ease;
-webkit- transition: all 0.75s ease;
-moz-animation: slider 10s infinite;
-webkit-animation: slider 10s infinite;
}

@-moz-keyframes slider {
0%{
background:url(../imagenes/fondo1.jpg) no-repeat scroll 0% 0% / cover transparent;

}
60%{
background:url(../imagenes/fondo2.jpg) no-repeat scroll 0% 0% / cover transparent;


}
75%{
background:url(../imagenes/fondo3.jpg) no-repeat scroll 0% 0% / cover transparent;


}
100%{
background:url(../imagenes/fondo4.jpg) no-repeat scroll 0% 0% / cover transparent;
}
}

@-webkit-keyframes slider {
0%{
background:url(../imagenes/fondo1.jpg) no-repeat scroll 0% 0% / cover transparent;

}
60%{
background:url(../imagenes/fondo2.jpg) no-repeat scroll 0% 0% / cover transparent;


}
75%{
background:url(../imagenes/fondo3.jpg) no-repeat scroll 0% 0% / cover transparent;


}
100%{
background:url(../imagenes/fondo4.jpg) no-repeat scroll 0% 0% / cover transparent;
}
}

Muchas gracias de antemano.
  #2 (permalink)  
Antiguo 29/04/2015, 02:43
Avatar de NueveReinas  
Fecha de Ingreso: septiembre-2013
Ubicación: No tan Buenos Aires
Mensajes: 1.101
Antigüedad: 10 años, 6 meses
Puntos: 145
Respuesta: Slider de fondos con Keyframes

¿Has probado sacando las barras / ?
__________________
¿Te sirvió la respuesta? Deja un +1
  #3 (permalink)  
Antiguo 29/04/2015, 04:06
 
Fecha de Ingreso: abril-2015
Ubicación: Bilbao
Mensajes: 4
Antigüedad: 8 años, 11 meses
Puntos: 0
Respuesta: Slider de fondos con Keyframes

Buenas Nuevereinas,

si, e incluso no poniendo tantas caracteristicas. He mirado un monton de foros y videos de yotube y lo tengo exactamente igual o al menos eso creo.
  #4 (permalink)  
Antiguo 29/04/2015, 06:21
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Slider de fondos con Keyframes

Solo algunas propiedades de los fondos pueden ser animadas, y de ellas no estás animando ninguna. Si esperas que que haga un fade-in-out o algo así, seguramente solo funcione en los navegadores que no hagan caso de la especificación. Pero en principio no tiene porqué funcionar.

Por otro lado si solo quieres cambiar un único atributo, no utilices short-hands. Bastaría con usar en tu caso background-image.
__________________
(:
  #5 (permalink)  
Antiguo 05/05/2015, 01:57
 
Fecha de Ingreso: abril-2015
Ubicación: Bilbao
Mensajes: 4
Antigüedad: 8 años, 11 meses
Puntos: 0
Respuesta: Slider de fondos con Keyframes

Si pzin es exactamente lo qu quiero un fadein-out. Crees que la solucion esta en utilizar background image, en vez de solo background? que es que background no puede ser animada, creo que en el ejemplo que vi en youtube funcionaba con esa, pero quizas lei mal.
  #6 (permalink)  
Antiguo 05/05/2015, 07:36
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Slider de fondos con Keyframes

Es lo mismo. background es un shorthand que aúna varios atributos, entre ellos background-image.

No puedes hacerlo con imágenes de fondo, aunque en algún navegador sí que hace eso, pero ese comportamiento sería el erróneo, no debería de funcionar. Tendrás que usar imágenes normales o imágenes de fondo pero ir ocultando esos elementos con opacidad y demás.
__________________
(:
  #7 (permalink)  
Antiguo 08/05/2015, 03:11
 
Fecha de Ingreso: abril-2015
Ubicación: Bilbao
Mensajes: 4
Antigüedad: 8 años, 11 meses
Puntos: 0
Respuesta: Slider de fondos con Keyframes

Pzin, como harias lo de las opacidades?

yo he intentado hacer algo parecido a esto: https://www.youtube.com/watch?v=FI2QV_wtSLc

Etiquetas: background, slider, todo, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:41.