How do I create the frosted glass effect when scrolling?


#1

I would like to recreate the effect when scrolling where elements are still blurred behind another.
I tried it with reduced opacity but it doesn’t really work.
Does anyone have an idea how to recreate this?

Thanks for the help in advance.blurry overlay.rp (59.2 KB)


#2

There’s not a built-in “blur” feature in Axure. You might be able to create a CSS plugin (on Axure Cloud) or apply CSS via “javascript injection”, based on this solution from stack overflow.

I’ve faked this before with a “cheap magic trick” …take a screenshot of your scrollable content (or select it all in RP, copy then use the “Paste as Image” feature), use a graphics app like Photoshop to apply a blur effect, then save that image, import into RP and move this blurred image with the scrollable content.

This updated RP file shows the approach in Page 2.
blurry overlay.rp (114.4 KB)