In my tutorial requests Trello board, a user asks:
How would you add the Ken Burns Effect to the front-page1 background image in infinity pro and keep it responsive?
The Ken Burns effect is a type of panning and zooming effect used in video production from still imagery.
We can create a custom animation using CSS transform property and specify scale3d (for zooming) and translate3d (for panning) at various keyframes. Then apply this animation to .front-page-1 element of Infinity Pro. But since animations get inherited to children, the widget (having the text which appears centered on top of the section) also keep zooming/panning in/out. While the reverse keyword may be used to get around this to some extent, it does not solve the problem fully.
We can work around this by noting that the main problem is because we are trying to animate the parent. What if we could use .front-page-1's :before pseudo selector to create a child element (above the widget area) and set the background image to it instead of to .front-page-1 and then animate it? This way, the widget will be independent and Ken Burns effect can be applied only to the background image.
Step 1
Edit lib/output.php.
To view the full content, please sign up for the membership.
Already a member? Log in below or here.
Can this be used for Altitude Pro, as well?
Hi again, Sridhar. I’m hoping you can give me some guidance. I want to have a Ken Burns slider with 3 or 4 images populating FP1 of Altitude pro, with text and two buttons over it. Is this possible? Thanks in advance.
Let’s continue here: https://sridharkatakam.com/forums/topic/altitude-pro-fp-1-slider-with-ken-burns-effect-overlaid-by-text-and-buttons/