javascript - How can I blur the dynamic contents behind a div? -
im working on project full screen styled google maps page. there way (css, jquery, or other options...) overlay header , slide-in sidebar blur effect similar ios frosted/blur effect?
im trying achieve this. sample blurred header
my problem is, because don't control underneath header , changes can't use 2 image trick simulate blurred background. suggestions?
read post https://stackoverflow.com/a/19688466/1663572 , related link http://abduzeedo.com/ios7-frosted-glass-effect-html-5-and-javascript
the solution uses steps.
- render html
- duplicate content area , convert canvas.
- move canvas header part
- sync scroll of content canvas in header
down on page example (the narrow one). there missing image or else , bit spilled try scrolling. i'm not sure frequency of changes of content mentioning. causing serious performance issues. try it.
i don't think of other option achieve comlicated think want.
Comments
Post a Comment