Best jQuery Blur Effect Plugins & Tutorials with Demo

oblurlay : Blur view of iOS7 style with CSS & jQuery

oblurlay : Blur view of iOS7 style with CSS & jQuery

oblurlay is implement a blur view of iOS7 style with svg and jquery.

Foggy : jQuery plugin for blurring Page elements

Foggy : jQuery plugin for blurring Page elements

Foggy is a jQuery plugin for blurring page elements. It supports IE (8 and up), Firefox, Safari and Chrome.

InfinitySlider – jQuery Slider with CSS3 Animations

InfinitySlider - jQuery Slider with CSS3 Animations

Modern, Customizable, Clean, Fluid and Responsive. Responsive effects by default and fully compatible with Desktop, Notebook, Tablet, Smarphone, Firefox, Chrome, Opera, Safari and Internet Explorer.Image Autofit is an awesome feature that allows you to responsive your images automatically by cutting its edges and resizing its sizes, to preserve a high definition on every device and create an awesome slider for desktop and mobile.

Features:

  • Super-Fluid CSS3 Effects & Transitions on Desktop & Mobile
  • You can select your IN/OUT/BACK Times for each element
  • HTML & CSS Content supported, you can add texts, images, videos, canvas, pricing tables, and all you want.
  • Fully Support of Video Embedding as Fullscreen or Boxed
  • Youtube & Vimeo API that stops the video if you change the slide
  • Image Autofit that allows you to select the subject position on the images
  • Cinematic Effect that allows you to make an animation-movement of the images
  • Blur Effect that allows you to make an automatic blur image from a normal one
  • Fully Cross-Browser Compatibility
  • Bootstrap 3 Integrated so you can use all the Bootstrap Elements inside the slide
  • Easy to integrate with other Frameworks
  • Font Awesome 4 Integrated
  • Fully Responsive
  • Play & Stop with the slide loader
  • Autoplay, you can active it to start your slide when the page is opened
  • Keyboard Navigation

 

jQuery Immersive Slider

jQuery Immersive Slider

Immersive Slider let you create a unique immersive slider experience that changes the whole container to match the viewing slide like you see at the Google’s TV website. The plugin will let you assign background images per slide without you doing all the hard work.

The plugin is capable of blurring the first image it finds in each slide, blow them up and use it as a background without you having to manually set each slide a background image. This is done using the CSS3 style called Filter which only works on Chrome, and maybe a performance hog.

Moving Blurry Background for JavaScript and jQuery

Moving Blurry Background for JavaScript and jQuery

BlurryBackground() is a JavaScript application which can be easily included in any website. It allows programmer to create modern-looking blurry backgrounds without need to load large background images. This means you can save even 90% of bandwith intended for blurry background image. It caches blurred images so that the CPU consumption is reduced.

Also, it provides a really easy mechanism of background animations so you can create modern, distinctive website’s elements in seconds. You can choose from a collection of 8 built-in animating functions like “gust”, “swing”, “raindrop” and more, or you may just use your own function. You can also create a playlist of blurred backgrounds and make them change every few seconds.

spoiler-alert : jQuery plugin to hide spoilers on your site

spoiler-alert : jQuery plugin to hide spoilers on your site

Don’t spoil it! Hide copy and images with a bit of SVG blur. Taste on mouseover. Eat on click.

Do you publish spoilers? Do you wish you could have them on your page in a way that wasn’t fucking rude? With Spoiler Alert! you can! Hide spoilers with a bit of blur.

Vague.js : jQuery Blur any kind of Html Element

Vague.js : jQuery Blur any kind of Html Element

Vague.js is an experimental script that allows you to blur any kind of html element thanks to the SVG filters. This script is crossbrowser and it was tested on:

  • Firefox 10 +
  • Chrome 18 +
  • Safari 6.0 +
  • IE 7 +

filtrr : Javascript image filters library

filtrr : Javascript image filters library

Filtrr2 is a JavaScript image manipulation library. Think of it as Instagram filters on the browser. It uses the <canvas> element to paint filtered pictures in the place of normal pictures on your website.Filtrr has a many image effect like Brighten, Saturate, Gamma, Adjust, Expose, Curves, Sharpen, Blur, Fill, Subtract, Sepia, Contrast, Posterize, Invert,  Alpha.

Blending modes

  1. Multiply
  2. Screen
  3. Overlay
  4. Soft Light
  5. Addition
  6. Exclusion
  7. Difference

Zoome : jQuery Image Zoom Effect Plugin

Zoome : jQuery Image Zoom Effect Plugin

Zoome is a jQuery plugin to help you zoom images with hover effect(grayscale,blur,transparent) and you can zoom-in or zoom-out use mousewheel.

Features:

  • Zoom with hover effects(blur,grayscale,transparent)
  • Cross browser
  • Control zoom with mousewheel
  • Easy to zoom range and the step num
  • Flexible options