Add Ken Burns Effect

kenny's Avatar

kenny

04 May, 2022 12:45 AM

Hi, Wondering if you have, or are aware of anyone else who has, implemented a Ken Burns style effect on slides using 'transform: scaled3d & translate3d'? I saw a thread from a decade ago where it was mentioned that the effect was too processor-heavy, but I think if using CSS transform it these days it may not be so bad.

In the Inspector I quickly dummied-up the concept using transform & transition. But I'm not sure how I would have it triggered upon the slide loading.

Thanks for any ideas here! The boss really wants this, and I desperately don't want him to force me to use a different slider plugin, as we've been using RoyalSlider for years and really like how it all functions!

  1. Support Staff 1 Posted by Dmytro Semenov on 04 May, 2022 05:15 AM

    Dmytro Semenov's Avatar

    Hi,

    You can potentially add it via CSS, for example - https://codepen.io/SaijoGeorge/pen/LxeGgY

    Default RoyalSlider image centering and scaling can be disabled from Image Options section http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/how-to-...

  2. 2 Posted by kenny on 04 May, 2022 08:42 PM

    kenny's Avatar

    Hi,
    Thanks for the quick reply. I hadn’t been thinking of using animate set to infinite so it would keep looping. This gets me started.

    I think the trick would now be how to introduce some ‘randomness’ so it’s not the same animation on each slide.

    Also trying to think of how to get it to zoom out without the image getting too small so you see the slide background near the edges. Zooming in seems to work OK if not too much movement.

    Thanks again. Take care.

    Ken

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac