Bonjour , je recherche a reproduire cet effet la :

http://www.cmap.illinois.gov/mobility/explore#/introduction/an-aging-system


Je parle du zoom qui va et vient en background.


a mon avis c'est une ID content : que l'on place en background size cover ( no repeat fixed center) pour le plein page et une ligne de jquery pour l'effet de zoom va et vient ?

Bonjour,

C'est même faisable via une animation CSS.

Je viens de regarder, c'est comme ça qu'ils l'ont fait sur le site que tu donne :

.full-page-image__background-image--odd {
    animation-duration: 40s;
    animation-iteration-count: infinite;
    animation-name: kenBurns-left-top;
    animation-timing-function: linear;
}

@keyframes kenBurns-left-top {
0% {
    transform: translate(0px, 0px) scale(1);
}
50% {
    transform: translate(30px, 30px) scale(1.1);
}
99% {
    transform: translate(0px, 0px) scale(1);
}
}

Attention, ils jouent avec un transforme parceque leur fond est à part, dans une div en absolute.
Si jamais dans la div il y a du texte ou d'autres élément ça fera tout grossir en meme temps. SI tu es dans ce second cas, fait plutôt varier le background-size (par exemple : 100% > 120% > 100%).

Bon code

HTML :


<div id="content">

<img src="images/images_01.JPG" class="nuages" alt="nuages" title="nuages">

J'ai essayé ca en CSS :


#content {
width:auto;
height:1000px;
background-size: cover;
}


.nuages {
animation-duration: 40s;
animation-iteration-count: infinite;
animation-name: kenBurns-left-top;
animation-timing-function: linear;
}


@keyframes kenBurns-left-top{
0% {
transform: translate(0px, 0px) scale(1);
}
50% {
transform: translate(30px, 30px) scale(1.5);
}
99% {
transform: translate(0px, 0px) scale(1);
}
}


Ca a pas trop l'air de marcher :s
Modifié par Adma931 (08 Apr 2015 - 16:06)

mmmm Adma931 == mika931 ?

Dans ton code tu ne ferme pas tes balise html, tu utilise une balise image mais des propriété CSS de background, pas de prefix webkit... ya plein de petits soucis quoi...

http://fiddle.jshell.net/Undless/3abm82jy/1/

C'est bon j'ai réussi comme çà, (dsl Adma931=mika931 , soucis de compte / mdp / connexion a chaque fois . )


#content {
width:auto;
height:1000px;

overflow:hidden;
position:relative;
}


#content img{
animation:zoom 10s linear infinite; /* Change this to alternate to stop the loop. */
-ms-animation:zoom 10s linear infinite;
-webkit-animation:zoom 10s linear infinite;
-0-animation:zoom 10s linear infinite;
-moz-animation:zoom 10s linear infinite;
position: absolute;
animation-direction: alternate-reverse;


}

@-webkit-keyframes zoom{
1%{zoom:100%;}
20%{
zoom:105%;
}
40% {
zoom:110%;}
60%{
zoom:110%;}
80%{
zoom:105%;
}
99%{
zoom:100%;}

}

Merci Laurent de ton aide !

C'est cool Edit fiddle ! je connaissais pas