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.

  1. render html
  2. duplicate content area , convert canvas.
  3. move canvas header part
  4. 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

Popular posts from this blog

jOOQ update returning clause with Oracle -

java - Warning equals/hashCode on @Data annotation lombok with inheritance -

java - BasicPathUsageException: Cannot join to attribute of basic type -