Ken Burns effect for Hero Background Image/s

Hi @chrisfo

Thanks for the suggestion. However, we do not support this feature yet. We will keep in mind ??

Have a nice day!

I’ve searched again and found some CSS-only code examples doing this nicely:
Ken Burns effect CSS only (rotates anti-clockwise while zooming out)
Ken Burns Effect fullscreen without js (zooming in)
Ken Burns effect – pure css (pan and zooming out)
Smooth Ken Burns Effect Using the Transition Property (zooming out)

I found the last one fitting and adapted the short code in Onepress Child style.css:

/* Hero Images Smooth Ken Burns Effect Using the CSS Transition Property: https://codepen.io/Silverink/pen/gbGKoZ
*/
.backstretch img {
  animation:move 9s ease infinite; /* Change this to alternate to stop the loop. */
  -ms-animation:move 9s ease infinite;
  -webkit-animation:move 9s ease infinite;
  -0-animation:move 9s ease infinite;
  -moz-animation:move 9s ease infinite;
  position: absolute;
  left:-150px;
  top:-150px;
}

Seems to work fine so far ??
Only thing to bother a little seems the performance especially on smartphones – appears to need a lot of cpu time…

• This reply was modified 5 years, 8 months ago by ChrisFo.

I’m trying to avoid performance problems by restricting to these screens:

@media screen and (max-width: 1281px) and (orientation: landscape) {
...
}

bugfix of last post, use:
min-width

• This reply was modified 5 years, 6 months ago by ChrisFo.