Blur effect on the element via Foggy jQuery Plugin

Some website owner Blur some part of the content and ask the user to register to their website or share the article for full the whole content.

Or use Blur effect for better user-experience for example – showing container elements when mouse focus over it and Blur other containers.

What in the tutorial ?

In this quick tutorial, I will show How you can Blur an element using jQuery.

For Blur effect I am using Foggy jQuery Plugin. It is a light-weight plugin which is easy to setup and use.

How it works

Foggy by default uses the “-webkit-filter: blur” CSS attribute.

If the browser doesn’t support it, Foggy falls back to a manual blur. It makes several copies of the selected HTML element. It adds transparency to all copies and moves each of them by small amount, thus creating the blur effect.

Blur effect on the element via Foggy jQuery Plugin


Contents

  1. Setup
  2. How to set on the elements
  3. With hover effect
  4. Conclusion

1. Setup

Its setup is simple you have only need to include jQuery and Foggy libraries within your project. You can download the foggy plugin from here.

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.foggy.min.js" type="text/javascript"></script>

2. How to set on the elements

You can add effect to any element and it has the limited number of properties from their you can customize the appearance.

# Add Blur effect

You need to call foggy() method on the selector or element on which you want to add or remove Blur effect.

Syntax

$( selector ).foggy();

Example

$( "p.blur").foggy();

When the method gets called then it adds an inline CSS to the selector element for dimming it.

Demo

Within the Demo, I added Blur effect on the <p> element.

# With properties

$('p.blur').foggy({
blurRadius: 3, 
opacity: 1, 
cssFilterSupport: true 
});

blurRadius – Increase the density of Blur. Its default value is 2.

opacity – Adjust the opacity of the element. Its default value is 0.8.

Demo

Try to change the value of properties using element and see the changes

 

# Remove Effect

Syntax

$( selector ).foggy(false);

Example

$( 'p.blur' ).foggy(false);

3. With hover effect

Let’s put all together.

In the example, I am showing lists of the post in the container which is by default blurred. When the user mouse over one of the container then removing the Blur effect.

Example

$(document).ready(function(){
 $('div.post').foggy();
 
 // Disable Blur effect
 $('div.post').mouseenter(function(){
  $(this).foggy(false);
 });

 // Enable Blur effect
 $('div.post').mouseleave(function(){
  $(this).foggy();
 });
});

Output

Mouse over the one of the post to see the changes.

Note – Sometime its not working on Firefox browser when enabling and disabling foggy() on the element.


4. Conclusion

In this tutorial, I discussed Blur effect using Foggy jQuery Plugin and show how you can use this within your project. It supports IE (8 and up), Microsoft Edge,Firefox, Safari, and Chrome.

Related Post

Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *