Ken burns effect

[Cosina]

Buongiorno a tutti. Testando questo codice per applicare l'effetto ken burns ad una immagine, mi sono accorta che il lato inferiore del container sale e scende seguendo il movimento dato dall'effetto. C'e un modo per fissare questo problema? Grazie mille

<style>
.container {
   max-width:600px;
   width: 100%;
   height: auto;
   margin:40px auto;
   overflow: hidden;
   }
   .kenburn {
   width:100%;
   -webkit-animation-name:pan;
   animation-name:pan;
   -webkit-animation-timing-function: linear;
   animation-timing-function: linear;
   -webkit-animation-direction: alternate;
   animation-direction: alternate;
   -webkit-transition:all 1.0s ease-in-out;
   -o-transition:all 1.0s ease-in-out;
   transition:all 1.0s ease-in-out;
   -webkit-animation-duration:20.0s;
   animation-duration:20.0s;
   -webkit-animation-iteration-count:infinite;
   animation-iteration-count:infinite;
   }
   @-webkit-keyframes pan {
   0% {
   -webkit-transform:translate(0,0) scale(1.0);
   transform:translate(0,0) scale(1.0);
   }
   100% {
   -webkit-transform:translate(-20px,-100px) scale(1.3);
   transform:translate(-20px,-100px) scale(1.3);}
   }
</style>

<div class="container">
   <img class="kenburn" src="img.jpg">
</div>

 

[WmbertSea]

Ciao, l'effetto di spostamento è dato da quel valore -100px della funzione translate, cioè la posizione sull'asse y.
Dovresti mantenere quel valore uguale a zero.

A mio parere potresti rimuovere l'intera funzione translate, lasciando solo la funzione scale:

  @-webkit-keyframes pan {
   0% {
   -webkit-transform: scale(1.0);
   transform: scale(1.0);
   }
   100% {
   -webkit-transform: scale(1.3);
   transform: scale(1.3);}
   }

In questo modo l'immagine viene solo ridimensionata (mantenendo il centro come origine degli assi), che equivale a mantenere translate(0,0).

 

[Cosina]

Ciao, l'effetto di spostamento è dato da quel valore -100px della funzione translate, cioè la posizione sull'asse y.
Dovresti mantenere quel valore uguale a zero.

A mio parere potresti rimuovere l'intera funzione translate, lasciando solo la funzione scale

Perfetto, funziona. Ti ringrazio WmbertSea, gentilissimo. Buona serata

 

[WmbertSea]

buon proseguimento