Ken Burns effect on Full Width Slider

Hi htm 2112! I´m now in the same situaton as you 1,5 years ago.
Would you mind telling me how you did it? (Ken Burns effect)

THANK YOU!

lisa

well on Victorias link the wrapping container in enfold for the images is: avia-slide-wrap

i would give a custom-class to the slideshow you like to influence – f.e.: kenburns
then it will be nice if only the active slide is doing that – so when i transpose the code from code pen to enfold classes :

.kenburns .active-slide .avia-slide-wrap {
  width: 100%;
  height: 56.25vw;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.kenburns .active-slide .avia-slide-wrap img {
  width: 100%;
  animation: move 20s ease infinite alternate;
  -ms-animation: move 20s ease infinite alternate;
  -webkit-animation: move 20s ease infinite alternate;
  -0-animation: move 20s ease infinite alternate;
  -moz-animation: move 20s ease infinite alternate;
  position: absolute;
}

@-webkit-keyframes move {
  0% {
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center;
    transform: scale(1.0);
    -ms-transform: scale(1.0); 
    -webkit-transform: scale(1.0);
    -o-transform: scale(1.0);
    -moz-transform: scale(1.0);
  }
  100% {
    transform: scale(1.2);
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);   
    -o-transform: scale(1.2);
    -moz-transform: scale(1.2);
  }
}

don’t know if all cross-browser settings are neccessary today – but i let them stay in the quick css code.
Important: see ( height: 56.25vw; ) if the width of the slider is 100vw then a 16:9 height will be approx: 56.25vw
The Code Pen Code only works nice if you have set a hight on that and that should reflect the aspect ratio well.
So it might be nice to have for Slideshows having a film slide with 16:9 format – the images got the same size on that.
I have on that testpage images of that format.:
https://webers-testseite.de/slider-with-kenburns/

Did you try that above code ?
the above link to my testpage is made with the alb elements –
___________________
Whatever; the advanced layerslider allready has that ken burns implemented.
Ken Burns is something that influences the background-image – on top of the advanced layout slider you have:

Press that “Show more options” Button.
then you see the options for ken burns:

Hello, hope you are all ok.

Sorry to come back to this.
I managed to implement the css given by @Guenni007, in an Easy Slider and it almost works perfectly.

When I load the page where the slider is, or refresh that page, the first slide grows down and is not within the size of the slide.
When you go to slide two and the other slides it is ok.

The photos are all the same size 1200x780px.

Someone can help me?

https://bit.ly/3hAB6qm

Regards

• This reply was modified 3 years, 7 months ago by luismiguelsantos.