CODEWITHSUNDEEP
javascripthtmlsvgblur
Giuseppe Cazzato
Giuseppe Cazzato

Reputation: 109

<div> with gaussian blur under it

I have portfolio website and I need to make following:

  1. I need <div> docked at the left part of my page behave like "frosted glass" (see http://clip2net.com/clip/m30443/1376076885-clip-147kb.png)

  2. For better understaning of what I want see http://themespectrum.com/scroll-demo : you may see left menu sidebar which is semi-transparent. I need also to make that sidebar something like that "frosted glass", such that images sliding under it will be blured inside the region of this sidebar.

blur = gaussian blur

I tried everything: SVG filters, webkit stuff, different js, jquery but they didn't do exactly what I want :( They just apply blur effect once for image or div. But what I need is to do it continiously, while one is scrolling images.

Upvotes: 1

Views: 2174

Answers (2)

Sjoerd
Sjoerd

Reputation: 84

blurjs only duplicates the background that needs to be blurred inside the blurring div. So in that case it is possible to do it with CSS and HTML only because it in fact does the same. Take a look here

The problem with blurjs and with the solution I just gave you is that you won't be able to blur a changing background like for example a slideshow. It will work when you only need it to be 'scrollable', you just have to make your background fixed.

Upvotes: 0

Kirk Backus
Kirk Backus

Reputation: 4876

Blur.js is probably what you are looking for!

http://blurjs.com/

It works for moving DIVs as well, which satisfies your presupposition!

Have a look at the draggable example

$('.target').blurjs({
    draggable: true,
    overlay: 'rgba(255,255,255,0.4)'
});

Upvotes: 4

Related Questions