Foros del Web » Creando para Internet » CSS »

Banner animado con CSS

Estas en el tema de Banner animado con CSS en el foro de CSS en Foros del Web. He visto esta página web en CSSbeauty en este link: http://southcreative.com.au/ Me gustaría saber como han hecho ese slideshow banner del principio de la web ...
  #1 (permalink)  
Antiguo 19/07/2008, 11:05
 
Fecha de Ingreso: julio-2008
Ubicación: Montcada i Reixac
Mensajes: 69
Antigüedad: 9 años, 5 meses
Puntos: 0
Banner animado con CSS

He visto esta página web en CSSbeauty en este link:
http://southcreative.com.au/

Me gustaría saber como han hecho ese slideshow banner del principio de la web que se ven las pantallas de ordenador. Se que han usado z-index y opacity pero me sorprende el resultado de hacerlo sin usar flash. Quiero este método para las páginas web que estoy construyendo y usar CSS completamente para esto me gusta.
Gracias!
  #2 (permalink)  
Antiguo 19/07/2008, 11:28
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Respuesta: Banner animado con CSS

esta pagina utiliza javascript para hacer esas trasiciones. Específicamente, este plugin de JQuery:
http://malsup.com/jquery/cycle/
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #3 (permalink)  
Antiguo 21/07/2008, 16:36
 
Fecha de Ingreso: julio-2008
Ubicación: Montcada i Reixac
Mensajes: 69
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: Banner animado con CSS

Gracias Juaniquillo por tu respuesta. He intentado estos días conseguir algún tutorial de jquery cycle pero aparte de la demo de la web que me indicas no he encontrado nada más. He intentado realizar el ejemplo de

http://malsup.com/jquery/cycle/begin.html

pero no me funciona. No se que hacer. He cargado las librerías en el código y el css pero no logro que haga caso...
  #4 (permalink)  
Antiguo 21/07/2008, 17:20
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Banner animado con CSS

Mira, he hecho un ejemplo. No es difícil de hacer.

Solo necesitas bajaste los dos archivos javascript

http://www.araudi.net/forosdelweb/js/jquery-1.2.1.js
http://www.araudi.net/forosdelweb/js...le.all.pack.js

y copiarte el código html.

Mikel.
  #5 (permalink)  
Antiguo 22/07/2008, 10:30
 
Fecha de Ingreso: julio-2008
Ubicación: Montcada i Reixac
Mensajes: 69
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: Banner animado con CSS

Muy util tu ejemplo, muchas gracias, lo voy entendiendo mejor, pero no acabo de entender los valores z-index y opacity. Se que z-index, indica el nivel de capa para mostrar las imágenes pero no entiendo de donde se saca el valor de opacity. Se calcula de alguna manera?
  #6 (permalink)  
Antiguo 22/07/2008, 10:40
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Banner animado con CSS

Cita:
Iniciado por babieka Ver Mensaje
Muy util tu ejemplo, muchas gracias, lo voy entendiendo mejor, pero no acabo de entender los valores z-index y opacity. Se que z-index, indica el nivel de capa para mostrar las imágenes pero no entiendo de donde se saca el valor de opacity. Se calcula de alguna manera?
Pues supongo que lo lleva de 0 a 10 y viceversa, pero no sé exactamente dónde. En el Javascript de jquery hay muchas referencias a opacity.

Mikel.
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 17:00.