Blurring a part of a layout using jQuery

Using JavaScript with Hype
1

Hello,
I’m trying to blur a part of a page using a square element. For that i use a special jQuery script named foggy.
If I understood well you’ll do it in three steps:

  1. Include the jQuery in the document (by dragging it in the ressources menu)
  2. Create a script and define the element that needs to be blurred (see the code under http://nbartlomiej.github.io/foggy/)
  3. Run the script with onload scene.

Until now it didn’t work and I’m aware that I have very little knowledge in javascript. I’ll be very thankful for every help !

See my example:

foggy.zip (259.7 KB)

2

When using jQuery add ons, you usually have to add the jQuery library too, so you'll have the plug-in (foggy) and jQuery in the resources pane. And, usually, jQuery needs to be loaded first - add jQuery then add your plug-in (jQuery.foggy)

Also, in your script you have "$('.square')" the dot is for a class whereas a "#" is for an id and you did not have a class name assigned to the square.

Blur_test.hype.zip (207.4 KB)

You might like Hype's blur function better, I added a blurred box in the demo

3

Hello Greg,
thank you for your response ! now I’m confused because the final effect is not what I wanted. Everything under the square element should be blurred (text and picture).

4

I’m not sure that jquery.foggy works that way, it looks like it just blurs an element, not makes a window that blurs part of another element.

5

you have to blur the image and the font seperately. if you blur the font, there´s the trick, that you´ve to use the shadow, colored white blured. then you can play with transperancy.
Blur_test.hype.zip (183.5 KB)

6

You may want to look into this…

http://www.blurjs.com/?bg=1

7

thanks Greg I also bumped on this one :wink:

$('.target').blurjs({
source: 'body',
radius: 7,
overlay: 'rgba(255,255,255,0.4)'});

The source: ‘body’ would be blurred by the target (see the example below)
But I have no idea how to adress my elements as a body ?

blurjs.zip (118.3 KB)

8

@strmiska:
thank you but see post#3

9

Give the picture (bulbs.jpg) an id (I used '#test') and use that id in the script to replace the word 'body'...

$('.target').blurjs({
source: '#test',
overlay: 'rgba(0,100,100,0.1)'
});

blurIt.hype.zip (264.5 KB)

10

Looks good !.. I find out that this plug-in only works with pictures and only one at a time.
Thank you Greg for all your advice. I’m looking for another plug-in or perhaps a new version of Hype who will works with layers like photoshop etc…

1 Like