Foros del Web » Creando para Internet » CSS »

css3 scroll image

Estas en el tema de css3 scroll image en el foro de CSS en Foros del Web. hola como estan quiero hacer un scroll de imagenes con css3 parecido a este http://jsfiddle.net/chriscoyier/Hyg3C/20/ la diferencia es que este es solo una imagen de ...
  #1 (permalink)  
Antiguo 12/01/2014, 20:06
 
Fecha de Ingreso: enero-2012
Mensajes: 224
Antigüedad: 12 años, 11 meses
Puntos: 1
css3 scroll image

hola como estan quiero hacer un scroll de imagenes con css3 parecido a este http://jsfiddle.net/chriscoyier/Hyg3C/20/

la diferencia es que este es solo una imagen de fondo en el div y el mio son varias imagenes.

El problema que tengo es que cuando termina la ultima imagen queda un gran espacio en blanco y luego se resetea bruscamente y lo que yo quiero es que la primer imagen aparezca pega a la ultima

este es el codigo que uso

gracias

css
Código PHP:


.imghoroscopo max-width60pxpadding0 30px 0 30px;}

#tech-slideshow {
    
height100px;
    
positionrelative;
    
overflowhidden;
}
#tech-slideshow > div {
    
height100px;
    
width1526px;

    
positionabsolute;
    
top0;
    
left0;
    
height100%;
    
    -
moz-transition:  opacity 0.5s ease-out
       -
o-transitionopacity 0.5s ease-out
  -
webkit-transitionopacity 0.5s ease-out
      -
ms-transitionopacity 0.5s ease-out

    -
webkit-animationmoveSlideshow 60s linear infinite;
    -
moz-animation:    moveSlideshow 60s linear infinite;
    
}

@-
webkit-keyframes moveSlideshow {
    
0% { left0; }
    
100% { left: -1684px; }
}
@-
moz-keyframes moveSlideshow {
    
0% { left0; }
    
100% { left: -1684px; }


html

Código PHP:

<div id="tech-slideshow">
    <
div id="tech-slideshow-1">
    <
img src="wp-content/themes/brownaldia/img/01.jpg" class="imghoroscopo">
    <
img src="wp-content/themes/brownaldia/img/02.jpg" class="imghoroscopo">
    <
img src="wp-content/themes/brownaldia/img/03.jpg" class="imghoroscopo">
    <
img src="wp-content/themes/brownaldia/img/04.jpg" class="imghoroscopo">
    <
img src="wp-content/themes/brownaldia/img/05.jpg" class="imghoroscopo">
    <
img src="wp-content/themes/brownaldia/img/06.jpg" class="imghoroscopo">
    <
img src="wp-content/themes/brownaldia/img/07.jpg" class="imghoroscopo">
    <
img src="wp-content/themes/brownaldia/img/08.jpg" class="imghoroscopo">
    <
img src="wp-content/themes/brownaldia/img/09.jpg" class="imghoroscopo">
    <
img src="wp-content/themes/brownaldia/img/10.jpg" class="imghoroscopo">
    <
img src="wp-content/themes/brownaldia/img/11.jpg" class="imghoroscopo">
    <
img src="wp-content/themes/brownaldia/img/12.jpg" class="imghoroscopo">
    </
div>
</
div
  #2 (permalink)  
Antiguo 12/01/2014, 20:49
 
Fecha de Ingreso: mayo-2013
Mensajes: 207
Antigüedad: 11 años, 7 meses
Puntos: 31
Respuesta: css3 scroll image

Lo primero y mas importante, lo que ves no es un scroll de imagenes porque sólo hay una imagen.
http://f.cl.ly/items/0z3t1e3z3P0G3y3A1o1A/collage.jpg

y lo que se mueve es el 2º div que tiene como fondo esa imagen, las posiciones del keyframe se corresponderán a la zona dondé se repite la primera imagen.
  #3 (permalink)  
Antiguo 13/01/2014, 05:55
Avatar de hcrisel  
Fecha de Ingreso: diciembre-2013
Ubicación: Gualeguaychú- Entre Rios
Mensajes: 58
Antigüedad: 11 años
Puntos: 4
Respuesta: css3 scroll image

Hola me quedé enganchado con tu post.
Aclara de antemano que el que yo acabo de agregar digo... (solo tal vez) te pueda interesar aunque es distinto al mío. Te deseo lo mejor.

http://www.forosdelweb.com/f53/novato-barra-horizontal-con-imagenes-1087788/
__________________
En lo que pueda ayudarte solo avisame. Todos para uno y uno para todos (sin abusar de los demás).
  #4 (permalink)  
Antiguo 13/01/2014, 06:12
 
Fecha de Ingreso: enero-2012
Mensajes: 224
Antigüedad: 12 años, 11 meses
Puntos: 1
Respuesta: css3 scroll image

Gracias por el aporte chicos encontre uno que quizas valla mejor para lo que necesito que es este

http://designshack.net/articles/css/...tephotobanner/

Etiquetas: css3, html, image, imagenes, scroll
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 20:45.