Add Ken Burns Effect
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!
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
Support Staff 1 Posted by Dmytro Semenov on 04 May, 2022 05:15 AM
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 Posted by kenny on 04 May, 2022 08:42 PM
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