This is a smooth and visually impressive method of catching the eye to some important content, before fading to the background to allow the content to take centre stage.
This concept uses the HTML text control to implement CSS blur in Power Apps. We can actually manipulate this to use a ‘gradient blur’, such that the blur tapers off in the same way a colour gradient might. We can use this to give the impression of a background that blurs more as the user scrolls down. This is combined with a subtly darkening (also contained in the CSS) that helps make the content pop more as it scrolls down.
I have used this in a dummy app that highlights a performance report a company may have, including information on how the report data breaks down, and what types of measures the user can expect.
The content itself is displayed using a flexible height gallery. While this is not an ideal method for displaying content like this, it does give me access to the VisibleIndex property, which I use to display a popup title bar once a certain portion of content has scrolled off-screen.
All in all, this presents a polished, graphically-pleasing UI that users may not expect from Power Apps.
Leave a Reply