CSS - kenburns

 
Vista:
sin imagen de perfil

kenburns

Publicado por alfredo (2 intervenciones) el 25/01/2017 03:09:09
hola soy nuevo en el foro y estoy haciendo mi primera pagina web, en la cabezera estoy usando una imagen con efecto kenburns, lo que quiero hacer es que esa imagen cambie por otra y asi sucesivamente, este es mi codigo css.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
#imageContainer {
    background-color: #333;
    width: 1420px;
    height: 600px;
 
    overflow: hidden;
    border: 2px #333 solid;
     z-index: -100;
}
 
 
#imageContainer {
    background-color: #333;
    width: 1420px;
    height: 600px;
 
    overflow: hidden;
    border: 2px #333 solid;
     z-index: -100;
}
 
@keyframes kenburns {
    0% {
      opacity: 0;
    }
    5% {
      opacity: 1;
    }
    95% {
        transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -110px, 0px);
        animation-timing-function: ease-in;
        opacity: 1;
    }
    100% {
        transform: scale3d(2, 2, 2) translate3d(-130px, -100px, 0px);
        opacity: 0;
    }
}
 
#imageContainer img {
  animation: kenburns 20s infinite;
}
 
div#texto {
  margin-top: -140px;
 position: absolute;
 margin-left:27%;
color: white; text-shadow: black 0.1em 0.1em 0.5em
}

y este es mi html:
1
2
3
<div id="imageContainer">
        <img src="http://cavaromarketing.com/mx/wp-content/uploads/2015/12/bajaseafoodexpo.jpg" width="" height="" >
</div>
ah estoy usando este script que me encontre por internet,
1
<script src="//www.kirupa.com/prefixfree.min.js"></script>
no se si alguien me pudiese ayudar, gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 624
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

kenburns

Publicado por xve (490 intervenciones) el 25/01/2017 12:02:14
Hola Alfredo, lo que haces desde CSS es ir acercándote hacia la imagen y al finalizar empezar de nuevo, pero eso lo haces desde CSS... si quitas el javascript, veras que te sigue funcionando!!!

Y tu lo que quieres, es que cuando finalice cambie de imagen y siga haciendo el mismo efecto con la nueva imagen?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

kenburns

Publicado por alfredo (2 intervenciones) el 25/01/2017 18:08:36
Gracias ya quite el script.
Si eso es lo que quiero hacer, que cambie de imagen y tenga el mismo efecto
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar