1

Need your help.

I created a static semi-opaque banner which stays at the top of a website. When a user scrolls the website the entire container objects goes underneath the banner. I want all the objects (images, text..etc) getting blury effect as it goes underneath the banner.

Thanks

LoveAndCoding
  • 7,857
  • 2
  • 31
  • 55
udaya shakya
  • 209
  • 1
  • 3
  • 8
  • What do you mean by a "blury" affect ? – Manse Jan 06 '12 at 16:31
  • You're going to need a lot more detail for this question. At present I'm not sure if you want the images to get blurry or if you want a blur effect on the images, which are two separate things. Can you provide a screen shot or link to the site so we can better visualize what you are looking for? – Matt Moore Jan 06 '12 at 16:32

2 Answers2

0

This isn't possible with CSS nor jQuery. You might be able to do something with IE's filters, however that's IE only (of course), and will invalidate your CSS.

Currently, there is no way to do this, although something might come along in CSS 4 or something.

The Chrome nightly builds support some filters, however there isn't an alpha blur filter (yet, at least).

Bojangles
  • 99,427
  • 50
  • 170
  • 208
  • 1
    [CSS3 also has Filters](http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/). At the time I write, it is already supported in Chrome nightlies. – kapa Jan 06 '12 at 16:36
  • @bazmegakapa Thanks for the link, however there isn't an alpha blur filter that the OP is looking for. You can't even combine blur with alpha transparency as that only applies to the element itself, _not_ what's underneath it. – Bojangles Jan 06 '12 at 16:39
0

The only way you're going to be able to do this is by getting fancy with some CSS and javascript. CSS doesn't support blur directly, but you can emulate it with text-shadow. Images can also be blurred with a little jquery/css/javascript magic, but will be problematic because you can't partially blur an image (what happens when only part of the image is under the banner?). It could probably be done by layering your images and keeping track of their position on screen, but all of this seems like a lot of work for a very small return.

So, assuming you've decided to give all of this a shot, you're going to have to use javascript to determine which parts of the page have passed under the banner and apply the style to those parts. The difficulty of this task will scale with the complexity of your page layout. In a best case scenario, your banner and content container are both 100% the width of the html body. At this point, it would be fairly trivial to write some kind of scanner that traverses the dom every time you page scroll to find elements that the blur should be applied to. However, best-case-scenario is rarely the case at hand, at which point I'd recommend abandoning the effort to pursue something with a greater ROI.

Community
  • 1
  • 1
Daniel Szabo
  • 7,181
  • 6
  • 48
  • 65