├── .gitignore
├── gulpfile.js
├── bower.json
├── package.json
├── readme.md
├── dist
    ├── background-blur.min.js
    └── background-blur.js
├── src
    └── background-blur.js
└── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | bower_components
3 | dist/video
4 | .DS_Store
5 | .idea
6 | npm-debug.log
7 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp = require('gulp');
 2 | var uglify = require('gulp-uglify');
 3 | var rename = require('gulp-rename');
 4 | 
 5 | gulp.task('compress', function() {
 6 |   gulp.src('src/*.js')
 7 |     .pipe(gulp.dest('dist'))
 8 |     .pipe(uglify())
 9 |     .pipe(rename({
10 |       extname: '.min.js'
11 |     }))
12 |     .pipe(gulp.dest('dist'))
13 | });
14 | 
15 | gulp.task('default', [ 'compress' ]);


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "background-blur",
 3 |   "version": "0.1.0",
 4 |   "authors": [
 5 |     "Maks Surguy <msurguy@gmail.com>"
 6 |   ],
 7 |   "description": "Image blur plugin",
 8 |   "main": "dist/background-blur.min.js",
 9 |   "moduleType": [
10 |     "globals"
11 |   ],
12 |   "keywords": [
13 |     "velocity",
14 |     "blur",
15 |     "animation",
16 |     "jquery",
17 |     "plugin"
18 |   ],
19 |   "license": "MIT",
20 |   "ignore": [
21 |     "**/.*",
22 |     "node_modules",
23 |     "bower_components",
24 |     "test",
25 |     "tests"
26 |   ]
27 | }
28 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "background-blur",
 3 |   "version": "0.1.3",
 4 |   "description": "jQuery Plugin for cross-browser blurring of images",
 5 |   "main": "dist/background-blur.min.js",
 6 |   "scripts": {
 7 |     "build": "gulp"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git://github.com/msurguy/background-blur.git"
12 |   },
13 |   "keywords": [
14 |     "Blur",
15 |     "velocity",
16 |     "animation",
17 |     "jQuery plugin",
18 |     "SVG"
19 |   ],
20 |   "author": "Maksim Surguy",
21 |   "dependencies": {
22 |     "jquery": ">=1.7.1"
23 |   },
24 |   "license": "MIT",
25 |   "devDependencies": {
26 |     "gulp": "^3.9.0",
27 |     "gulp-rename": "^1.2.2",
28 |     "gulp-uglify": "^1.2.0"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # Background Blur Plugin
 2 | 
 3 | Background Blur plugin is a cross browser jQuery plugin for blurring images.
 4 | 
 5 | See http://msurguy.github.io/background-blur/ for documentation and demos 
 6 | 
 7 | ## Installation and Usage
 8 | 
 9 | Install the plugin with Bower:
10 | 
11 | `bower install background-blur`
12 | 
13 | Or with NPM:
14 | 
15 | `npm install background-blur`
16 | 
17 | Or manually:
18 | ```javascript
19 | <script src="jquery.min.js"></script>
20 | <script src="background-blur.min.js"></script>
21 | ```
22 | 
23 | Create a container which will contain the blurred image:
24 | 
25 | ```html
26 | <div id='some-element'></div>
27 | ```
28 | Then create a blurred image in that container:
29 | 
30 | ```javascript
31 | $('#some-element').backgroundBlur({
32 |     imageURL : 'http://URL-of-the-image',
33 |     blurAmount : 50,
34 |     imageClass : 'bg-blur'
35 | });
36 | ```
37 | 
38 | OR Create a blurred image and fade it in:
39 | 
40 | ```javascript
41 | $('#some-element').backgroundBlur({
42 |     imageURL : 'http://URL-of-the-image',
43 |     blurAmount : 50,
44 |     imageClass : 'bg-blur'
45 |     duration: 1000, // If the image needs to be faded in, how long that should take
46 |     endOpacity : 1 // Specify the final opacity that the image will have
47 | });
48 | ```
49 | 
50 | OR Create a blurred image, fade it in and switch to another image:
51 | 
52 | ```javascript
53 | // Initialize the blur
54 | $('#some-element').backgroundBlur({
55 |     imageURL : 'http://URL-of-the-image',
56 |     blurAmount : 50,
57 |     imageClass : 'bg-blur'
58 |     duration: 1000, // If the image needs to be faded in, how long that should take
59 |     endOpacity : 1 // Specify the final opacity that the image will have
60 | });
61 | 
62 | //Switch the image
63 | $('#some-element').backgroundBlur('http://URL-of-another-image');
64 | ```
65 | 
66 | ## Browser Support:
67 | 
68 | - Chrome
69 | - Firefox
70 | - Safari and Safari Mobile (iOS)
71 | - IE6, IE7, IE8 - blur is supported without animation (need to omit "duration" property in those browsers to make this plugin work, the problem will get fixed when Velocity.js issue gets fixed)
72 | - IE9, IE10, IE11
73 | - Android browsers
74 | 
75 | Possibly, more. Please let me know if some browser doesn't work
76 | 
77 | ## Under the hood:
78 | 
79 | This plugin utilizes SVG filter to blur the image if SVG is supported by the browser (all except IE), otherwise the plugin creates an IMG tag and applies a special IE-only filter in CSS
80 | 
81 | **Q:** Why not simply use CSS 3 blur filter? 
82 | **A:** The browser support for SVG blur filter is much wider when it comes to older browsers.
83 | 
84 | **Velocity.js** support:
85 | 
86 | If you are using Velocity.js animation library, the plugin will automatically detect its presence and make fade in/fade out animations more performant, especially on mobile. If Velocity is not present on the page, jQuery's "animate" is used instead.
87 | 
88 | ## Where is this used?
89 | 
90 | This plugin is currently used on http://www.nbcnews.com/video
91 | 
92 | Have questions / suggestions or using the plugin? Please reach out on Github or Twitter at http://twitter.com/msurguy
93 | 
94 | ## LICENSE 
95 | 
96 | This plugin is released under MIT license, giving you permission to use for commercial and non-commercial projects.
97 | 


--------------------------------------------------------------------------------
/dist/background-blur.min.js:
--------------------------------------------------------------------------------
1 | !function(t){"use strict";function e(e){return this.each(function(){var i=t(this),n=i.data("plugin.backgroundBlur"),o=t.extend({},r.DEFAULTS,i.data(),"object"==typeof e&&e);n||i.data("plugin.backgroundBlur",n=new r(this,o)),"fadeIn"===e?n.fadeIn():"fadeOut"===e?n.fadeOut():"string"==typeof e&&n.generateBlurredImage(e)})}var i=function(){for(var t,e=3,i=document.createElement("div"),n=i.getElementsByTagName("i");i.innerHTML="<!--[if gt IE "+ ++e+"]><i></i><![endif]-->",n[0];);return e>4?e:t}(),n=function(){return"_"+Math.random().toString(36).substr(2,9)},o={svgns:"http://www.w3.org/2000/svg",xlink:"http://www.w3.org/1999/xlink",createElement:function(t,e){var i=document.createElementNS(o.svgns,t);return e&&o.setAttr(i,e),i},setAttr:function(t,e){for(var i in e)"href"===i?t.setAttributeNS(o.xlink,i,e[i]):t.setAttribute(i,e[i]);return t}},r=function(e,i){this.internalID=n(),this.$element=t(e),this.$width=this.$element.width(),this.$height=this.$element.height(),this.element=e,this.options=t.extend({},r.DEFAULTS,i),this.$overlayEl=this.createOverlay(),this.$blurredImage={},this.useVelocity=this.detectVelocity(),this.attachListeners(),this.generateBlurredImage(this.options.imageURL)};r.VERSION="0.1.1",r.DEFAULTS={imageURL:"",blurAmount:10,imageClass:"",overlayClass:"",duration:!1,opacity:1},r.prototype.detectVelocity=function(){return!!window.jQuery.Velocity},r.prototype.attachListeners=function(){this.$element.on("ui.blur.loaded",t.proxy(this.fadeIn,this)),this.$element.on("ui.blur.unload",t.proxy(this.fadeOut,this))},r.prototype.fadeIn=function(){this.options.duration&&this.options.duration>0&&(this.useVelocity?this.$blurredImage.velocity({opacity:this.options.opacity},{duration:this.options.duration}):this.$blurredImage.animate({opacity:this.options.opacity},{duration:this.options.duration}))},r.prototype.fadeOut=function(){this.options.duration&&this.options.duration>0?this.useVelocity?this.$blurredImage.velocity({opacity:0},{duration:this.options.duration}):this.$blurredImage.animate({opacity:0},{duration:this.options.duration}):this.$blurredImage.css({opacity:0})},r.prototype.generateBlurredImage=function(t){var e=this.$blurredImage;this.internalID=n(),e.length>0&&(this.options.duration&&this.options.duration>0?this.useVelocity?e.first().velocity({opacity:0},{duration:this.options.duration,complete:function(){e.remove()}}):e.first().animate({opacity:0},{duration:this.options.duration,complete:function(){e.remove()}}):e.remove()),i?this.$blurredImage=this.createIMG(t,this.$width,this.$height):this.$blurredImage=this.createSVG(t,this.$width,this.$height)},r.prototype.createOverlay=function(){return this.options.overlayClass&&""!==this.options.overlayClass?t("<div></div>").prependTo(this.$element).addClass(this.options.overlayClass):!1},r.prototype.createSVG=function(e,i,n){var r=this,s=o.createElement("svg",{xmlns:o.svgns,version:"1.1",width:i,height:n,id:"blurred"+this.internalID,"class":this.options.imageClass,viewBox:"0 0 "+i+" "+n,preserveAspectRatio:"none"}),a="blur"+this.internalID,u=o.createElement("filter",{id:a}),l=o.createElement("feGaussianBlur",{"in":"SourceGraphic",stdDeviation:this.options.blurAmount}),h=o.createElement("image",{x:0,y:0,width:i,height:n,externalResourcesRequired:"true",href:e,style:"filter:url(#"+a+")",preserveAspectRatio:"none"});h.addEventListener("load",function(){r.$element.trigger("ui.blur.loaded")},!0),h.addEventListener("SVGLoad",function(){r.$element.trigger("ui.blur.loaded")},!0),u.appendChild(l),s.appendChild(u),s.appendChild(h);var d=t(s);return r.options.duration&&r.options.duration>0&&(d.css({opacity:0}),window.setTimeout(function(){"0"===d.css("opacity")&&d.css({opacity:1})},this.options.duration+100)),this.element.insertBefore(s,this.element.firstChild),d},r.prototype.createIMG=function(t,e,i){var n=this,o=this.prependImage(t),r=2*this.options.blurAmount>100?100:2*this.options.blurAmount;return o.css({filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius="+r+") ",top:2.5*-this.options.blurAmount,left:2.5*-this.options.blurAmount,width:e+2.5*this.options.blurAmount,height:i+2.5*this.options.blurAmount}).attr("id","blurred"+this.internalID),o.load(function(){n.$element.trigger("ui.blur.loaded")}),this.options.duration&&this.options.duration>0&&window.setTimeout(function(){"0"===o.css("opacity")&&o.css({opacity:1})},this.options.duration+100),o},r.prototype.prependImage=function(e){var i,n=t('<img src="'+e+'" />');return i=this.$overlayEl?n.insertBefore(this.$overlayEl).attr("id",this.internalID).addClass(this.options.imageClass):n.prependTo(this.$element).attr("id",this.internalID).addClass(this.options.imageClass)};var s=t.fn.backgroundBlur;t.fn.backgroundBlur=e,t.fn.backgroundBlur.Constructor=r,t.fn.backgroundBlur.noConflict=function(){return t.fn.backgroundBlur=s,this}}(jQuery);


--------------------------------------------------------------------------------
/dist/background-blur.js:
--------------------------------------------------------------------------------
  1 | /* Image Blur plugin, author @msurguy
  2 | 
  3 |  Usage:
  4 | 
  5 |  Create a set of elements that follows the following HTML structure:
  6 | 
  7 |  <div class="container">
  8 |    <div class="content">
  9 |    ...
 10 |    </div>
 11 |  </div>
 12 | 
 13 |  Add the following css:
 14 | 
 15 |  .container {
 16 |    overflow: hidden;
 17 |    width: 100%;
 18 |    position: relative;
 19 |  }
 20 | 
 21 |  .container .bg-blur-overlay {
 22 |    z-index: -1;
 23 |    position: absolute;
 24 |    width: 100%;
 25 |    height: 100%;
 26 |    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI0NiUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wOCIvPjxzdG9wIG9mZnNldD0iNTklIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMDgiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC45Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
 27 |    background-size: 100%;
 28 |    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(46%, rgba(0, 0, 0, 0.08)), color-stop(59%, rgba(0, 0, 0, 0.08)), color-stop(100%, rgba(0, 0, 0, 0.9)));
 29 |    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.08) 46%, rgba(0, 0, 0, 0.08) 59%, rgba(0, 0, 0, 0.9) 100%);
 30 |    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.08) 46%, rgba(0, 0, 0, 0.08) 59%, rgba(0, 0, 0, 0.9) 100%);
 31 |    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 46%, rgba(0, 0, 0, 0.08) 59%, rgba(0, 0, 0, 0.9) 100%);
 32 |  }
 33 | 
 34 |  .container .bg-blur {
 35 |    z-index: -2;
 36 |    opacity: 0;
 37 |    position: absolute;
 38 |    width: 100%;
 39 |    min-height: 100%;
 40 |    height: auto;
 41 |    display: block;
 42 |    top: 0;
 43 |    left: 0;
 44 |  }
 45 | 
 46 |  .container .content {
 47 |   z-index: 1;
 48 |  }
 49 | 
 50 |  Call the plugin on the container element to add a blurred background to it:
 51 | 
 52 |  $('.container').backgroundBlur({
 53 |    imageURL : 'http://website.com/images/img.jpg', // URL to the image that will be used for blurring
 54 |    blurAmount : 10, // Amount of blurrines
 55 |    imageClass : 'bg-blur', // CSS class that will be applied to the image and to the SVG element,
 56 |    overlayClass : 'bg-blur-overlay', // CSS class of an element that will overlay the blur background (useful for additional effects)
 57 |    duration : 1000, // If the image needs to be faded in, how long that should take
 58 |    endOpacity : 0.6 // Specify the final opacity that the image will have
 59 |  });
 60 | 
 61 |  Available methods of the plugin are :
 62 | 
 63 |  $('.container').backgroundBlur('string'); // swap the image to another image while using initial settings for animation
 64 |  $('.container').backgroundBlur('fadeIn'); // fade in
 65 |  $('.container').backgroundBlur('fadeOut'); // fade out
 66 | 
 67 |  */
 68 | 
 69 | ;(function ($) {
 70 |   'use strict';
 71 | 
 72 |   // IE version detection
 73 |   var ie = (function() {
 74 |     var undef,
 75 |       v = 3,
 76 |       div = document.createElement('div'),
 77 |       all = div.getElementsByTagName('i');
 78 | 
 79 |     while (
 80 |       div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
 81 |         all[0]
 82 |       ){}
 83 | 
 84 |     return v > 4 ? v : undef;
 85 | 
 86 |   }());
 87 | 
 88 |   // Random ID generator
 89 |   var randomID = function () {
 90 |     return '_' + Math.random().toString(36).substr(2, 9);
 91 |   };
 92 | 
 93 |   //micro lib that creates SVG elements and adds attributes to it
 94 |   var SVG = {
 95 | 
 96 |     //namespaces
 97 |     svgns: 'http://www.w3.org/2000/svg',
 98 |     xlink: 'http://www.w3.org/1999/xlink',
 99 | 
100 |     //creating of SVG element
101 |     createElement: function(name, attrs) {
102 |       var element = document.createElementNS(SVG.svgns, name);
103 | 
104 |       if (attrs) {
105 |         SVG.setAttr(element, attrs);
106 |       }
107 |       return element;
108 |     },
109 | 
110 |     //setting attributes
111 |     setAttr: function(element, attrs) {
112 |       for (var i in attrs) {
113 |         if (i === 'href') { //path of an image should be stored as xlink:href attribute
114 |           element.setAttributeNS(SVG.xlink, i, attrs[i]);
115 |         } else { //other common attribute
116 |           element.setAttribute(i, attrs[i]);
117 |         }
118 |       }
119 |       return element;
120 |     }
121 |   };
122 | 
123 |   // backgroundBlur PUBLIC CLASS DEFINITION
124 |   // ================================
125 | 
126 |   var Blur = function (element, options) {
127 |     this.internalID   = randomID();
128 |     this.$element     = $(element);
129 |     this.$width       = this.$element.width();
130 |     this.$height      = this.$element.height();
131 |     this.element      = element;
132 |     this.options      = $.extend({}, Blur.DEFAULTS, options);
133 |     this.$overlayEl   = this.createOverlay();
134 |     this.$blurredImage = {};
135 |     this.useVelocity = this.detectVelocity(); // If Velocity.js is present, use it for performant animation
136 |     this.attachListeners();
137 |     this.generateBlurredImage(this.options.imageURL);
138 |   };
139 | 
140 |   Blur.VERSION  = '0.1.1';
141 | 
142 |   Blur.DEFAULTS = {
143 |     imageURL      : '', // URL to the image
144 |     blurAmount    : 10, // Amount of blurrines
145 |     imageClass    : '', // CSS class that will be applied to the image and to the SVG element,
146 |     overlayClass  : '', // CSS class of the element that will overlay the blur image
147 |     duration      : false, // If the image needs to be faded in, how long should that take
148 |     opacity       : 1 // Specify the final opacity
149 |   };
150 | 
151 |   Blur.prototype.detectVelocity= function() {
152 |     return !!window.jQuery.Velocity;
153 |   };
154 | 
155 |   Blur.prototype.attachListeners = function() {
156 |     this.$element.on('ui.blur.loaded', $.proxy(this.fadeIn, this));
157 |     this.$element.on('ui.blur.unload', $.proxy(this.fadeOut, this));
158 |   };
159 | 
160 |   Blur.prototype.fadeIn = function () {
161 |     if (this.options.duration && this.options.duration > 0) {
162 |       if (this.useVelocity) {
163 |         this.$blurredImage
164 |           .velocity({
165 |             opacity: this.options.opacity
166 |           }, {
167 |             duration: this.options.duration
168 |           });
169 |       } else {
170 |         this.$blurredImage
171 |           .animate({
172 |             opacity: this.options.opacity
173 |           }, {
174 |             duration: this.options.duration
175 |           });
176 |       }
177 | 
178 |     }
179 |   };
180 | 
181 |   Blur.prototype.fadeOut = function () {
182 |     if (this.options.duration && this.options.duration > 0) {
183 |       if (this.useVelocity) {
184 |         this.$blurredImage
185 |           .velocity({
186 |             opacity: 0
187 |           }, {
188 |             duration: this.options.duration
189 |           });
190 |       } else {
191 |         this.$blurredImage
192 |           .animate({
193 |             opacity: 0
194 |           }, {
195 |             duration: this.options.duration
196 |           });
197 |       }
198 | 
199 |     } else {
200 |       this.$blurredImage.css({'opacity' : 0 });
201 |     }
202 |   };
203 | 
204 |   Blur.prototype.generateBlurredImage = function (url) {
205 |     var $previousImage = this.$blurredImage;
206 |     this.internalID = randomID();
207 | 
208 |     if( $previousImage.length > 0) {
209 |       if (this.options.duration && this.options.duration > 0) {
210 |         if (this.useVelocity) {
211 |           $previousImage.first().velocity({ opacity: 0 },{
212 |             duration : this.options.duration,
213 |             complete : function() {
214 |               $previousImage.remove();
215 |             }
216 |           });
217 |         } else {
218 |           $previousImage.first().animate({ opacity: 0 },{
219 |             duration : this.options.duration,
220 |             complete : function() {
221 |               $previousImage.remove();
222 |             }
223 |           });
224 |         }
225 |       } else {
226 |         $previousImage.remove();
227 |       }
228 | 
229 |     }
230 |     if (!ie) {
231 |       this.$blurredImage = this.createSVG(url, this.$width, this.$height);
232 |     } else {
233 |       this.$blurredImage = this.createIMG(url, this.$width, this.$height);
234 |     }
235 |   };
236 | 
237 |   Blur.prototype.createOverlay = function () {
238 |     if (this.options.overlayClass && this.options.overlayClass !== ''){
239 |       return $('<div></div>').prependTo(this.$element).addClass(this.options.overlayClass);
240 |     }
241 | 
242 |     return false;
243 |   };
244 | 
245 |   Blur.prototype.createSVG = function(url, width, height){
246 |     var that = this;
247 |     var svg = SVG.createElement('svg', { //our SVG element
248 |       xmlns: SVG.svgns,
249 |       version: '1.1',
250 |       width: width,
251 |       height: height,
252 |       id: 'blurred' + this.internalID,
253 |       'class': this.options.imageClass,
254 |       viewBox: '0 0 ' + width + ' '+ height,
255 |       preserveAspectRatio: 'none'
256 |     });
257 | 
258 |     var filterId = 'blur' + this.internalID; //id of the filter that is called by image element
259 |     var filter = SVG.createElement('filter', { //filter
260 |       id: filterId
261 |     });
262 | 
263 |     var gaussianBlur = SVG.createElement('feGaussianBlur', { // gaussian blur element
264 |       'in': 'SourceGraphic', //"in" is keyword. Opera generates an error if we don't put quotes
265 |       stdDeviation: this.options.blurAmount // intensity of blur
266 |     });
267 | 
268 |     var image = SVG.createElement('image', { //The image that uses the filter of blur
269 |       x: 0,
270 |       y: 0,
271 |       width: width,
272 |       height: height,
273 |       'externalResourcesRequired' : 'true',
274 |       href: url,
275 |       style: 'filter:url(#' + filterId + ')', //filter link
276 |       preserveAspectRatio: 'none'
277 |     });
278 | 
279 |     image.addEventListener('load', function() {
280 |       that.$element.trigger('ui.blur.loaded');
281 |     }, true);
282 | 
283 |     image.addEventListener('SVGLoad', function() {
284 |       that.$element.trigger('ui.blur.loaded');
285 |     }, true);
286 | 
287 |     filter.appendChild(gaussianBlur); //adding the element of blur into the element of filter
288 |     svg.appendChild(filter); //adding the filter into the SVG
289 |     svg.appendChild(image); //adding an element of an image into the SVG
290 |     var $svg = $(svg);
291 | 
292 |     // Ensure that the image is shown after duration + 100 msec in case the SVG load event didn't fire or took too long
293 |     if (that.options.duration && that.options.duration > 0) {
294 |       $svg.css({ opacity : 0});
295 |       window.setTimeout(function(){
296 |         if ($svg.css('opacity') === '0') {
297 |           $svg.css({ opacity : 1});
298 |         }
299 |       }, this.options.duration + 100);
300 |     }
301 |     this.element.insertBefore(svg, this.element.firstChild);
302 |     return $svg;
303 |   };
304 | 
305 |   Blur.prototype.createIMG = function(url, width, height){
306 |     var that = this;
307 |     var $originalImage = this.prependImage(url);
308 |     var newBlurAmount = ((this.options.blurAmount * 2) > 100) ? 100 : (this.options.blurAmount * 2);
309 |     // apply special CSS attributes to the image to blur it
310 |     $originalImage.css({
311 |       //filter property; here the intensity of blur multipied by two is around equal to the intensity in common browsers.
312 |       filter: 'progid:DXImageTransform.Microsoft.Blur(pixelradius=' + newBlurAmount + ') ',
313 |       //aligning of the blurred image by vertical and horizontal
314 |       top: -this.options.blurAmount * 2.5,
315 |       left: -this.options.blurAmount * 2.5,
316 |       width: width + (this.options.blurAmount * 2.5),
317 |       height: height + (this.options.blurAmount * 2.5) })
318 |       .attr('id', 'blurred' + this.internalID);
319 | 
320 |     $originalImage.load(function(){
321 |       that.$element.trigger('ui.blur.loaded');
322 |     });
323 | 
324 |     // Ensure that the image is shown after duration + 100 msec in case the image load event didn't fire or took too long
325 |     if (this.options.duration && this.options.duration > 0) {
326 |       window.setTimeout(function(){
327 |         if ($originalImage.css('opacity') === '0') {
328 |           $originalImage.css({ opacity : 1});
329 |         }
330 |       }, this.options.duration + 100);
331 |     }
332 |     return $originalImage;
333 |   };
334 | 
335 |   Blur.prototype.prependImage = function(url) {
336 |     var $image;
337 |     var $imageEl = $('<img src="'+url+'" />');
338 |     if (this.$overlayEl) {
339 |       $image = $imageEl.insertBefore(this.$overlayEl).attr('id', this.internalID).addClass(this.options.imageClass);
340 |     } else {
341 |       $image = $imageEl.prependTo(this.$element).attr('id', this.internalID).addClass(this.options.imageClass);
342 |     }
343 | 
344 |     return $image;
345 |   };
346 |   // backgroundBlur PLUGIN DEFINITION
347 |   // ==========================
348 | 
349 |   function Plugin(option) {
350 |     return this.each(function () {
351 |       var $this   = $(this);
352 |       var data    = $this.data('plugin.backgroundBlur');
353 |       var options = $.extend({}, Blur.DEFAULTS, $this.data(), typeof option === 'object' && option);
354 | 
355 |       if (!data) {
356 |         $this.data('plugin.backgroundBlur', (data = new Blur(this, options)));
357 |       }
358 |       if (option === 'fadeIn') {
359 |         data.fadeIn();
360 |       } else if (option === 'fadeOut') {
361 |         data.fadeOut();
362 |       } else if (typeof option === 'string') {
363 |         data.generateBlurredImage(option);
364 |       }
365 |     });
366 |   }
367 | 
368 |   var old = $.fn.backgroundBlur;
369 | 
370 |   $.fn.backgroundBlur             = Plugin;
371 |   $.fn.backgroundBlur.Constructor = Blur;
372 | 
373 |   // NO CONFLICT
374 |   // ====================
375 | 
376 |   $.fn.backgroundBlur.noConflict = function () {
377 |     $.fn.backgroundBlur = old;
378 |     return this;
379 |   };
380 | 
381 | })(jQuery);
382 | 


--------------------------------------------------------------------------------
/src/background-blur.js:
--------------------------------------------------------------------------------
  1 | /* Image Blur plugin, author @msurguy
  2 | 
  3 |  Usage:
  4 | 
  5 |  Create a set of elements that follows the following HTML structure:
  6 | 
  7 |  <div class="container">
  8 |    <div class="content">
  9 |    ...
 10 |    </div>
 11 |  </div>
 12 | 
 13 |  Add the following css:
 14 | 
 15 |  .container {
 16 |    overflow: hidden;
 17 |    width: 100%;
 18 |    position: relative;
 19 |  }
 20 | 
 21 |  .container .bg-blur-overlay {
 22 |    z-index: -1;
 23 |    position: absolute;
 24 |    width: 100%;
 25 |    height: 100%;
 26 |    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI0NiUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wOCIvPjxzdG9wIG9mZnNldD0iNTklIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMDgiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC45Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
 27 |    background-size: 100%;
 28 |    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(46%, rgba(0, 0, 0, 0.08)), color-stop(59%, rgba(0, 0, 0, 0.08)), color-stop(100%, rgba(0, 0, 0, 0.9)));
 29 |    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.08) 46%, rgba(0, 0, 0, 0.08) 59%, rgba(0, 0, 0, 0.9) 100%);
 30 |    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.08) 46%, rgba(0, 0, 0, 0.08) 59%, rgba(0, 0, 0, 0.9) 100%);
 31 |    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 46%, rgba(0, 0, 0, 0.08) 59%, rgba(0, 0, 0, 0.9) 100%);
 32 |  }
 33 | 
 34 |  .container .bg-blur {
 35 |    z-index: -2;
 36 |    opacity: 0;
 37 |    position: absolute;
 38 |    width: 100%;
 39 |    min-height: 100%;
 40 |    height: auto;
 41 |    display: block;
 42 |    top: 0;
 43 |    left: 0;
 44 |  }
 45 | 
 46 |  .container .content {
 47 |   z-index: 1;
 48 |  }
 49 | 
 50 |  Call the plugin on the container element to add a blurred background to it:
 51 | 
 52 |  $('.container').backgroundBlur({
 53 |    imageURL : 'http://website.com/images/img.jpg', // URL to the image that will be used for blurring
 54 |    blurAmount : 10, // Amount of blurrines
 55 |    imageClass : 'bg-blur', // CSS class that will be applied to the image and to the SVG element,
 56 |    overlayClass : 'bg-blur-overlay', // CSS class of an element that will overlay the blur background (useful for additional effects)
 57 |    duration : 1000, // If the image needs to be faded in, how long that should take
 58 |    endOpacity : 0.6 // Specify the final opacity that the image will have
 59 |  });
 60 | 
 61 |  Available methods of the plugin are :
 62 | 
 63 |  $('.container').backgroundBlur('string'); // swap the image to another image while using initial settings for animation
 64 |  $('.container').backgroundBlur('fadeIn'); // fade in
 65 |  $('.container').backgroundBlur('fadeOut'); // fade out
 66 | 
 67 |  */
 68 | 
 69 | ;(function ($) {
 70 |   'use strict';
 71 | 
 72 |   // IE version detection
 73 |   var ie = (function() {
 74 |     var undef,
 75 |       v = 3,
 76 |       div = document.createElement('div'),
 77 |       all = div.getElementsByTagName('i');
 78 | 
 79 |     while (
 80 |       div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
 81 |         all[0]
 82 |       ){}
 83 | 
 84 |     return v > 4 ? v : undef;
 85 | 
 86 |   }());
 87 | 
 88 |   // Random ID generator
 89 |   var randomID = function () {
 90 |     return '_' + Math.random().toString(36).substr(2, 9);
 91 |   };
 92 | 
 93 |   //micro lib that creates SVG elements and adds attributes to it
 94 |   var SVG = {
 95 | 
 96 |     //namespaces
 97 |     svgns: 'http://www.w3.org/2000/svg',
 98 |     xlink: 'http://www.w3.org/1999/xlink',
 99 | 
100 |     //creating of SVG element
101 |     createElement: function(name, attrs) {
102 |       var element = document.createElementNS(SVG.svgns, name);
103 | 
104 |       if (attrs) {
105 |         SVG.setAttr(element, attrs);
106 |       }
107 |       return element;
108 |     },
109 | 
110 |     //setting attributes
111 |     setAttr: function(element, attrs) {
112 |       for (var i in attrs) {
113 |         if (i === 'href') { //path of an image should be stored as xlink:href attribute
114 |           element.setAttributeNS(SVG.xlink, i, attrs[i]);
115 |         } else { //other common attribute
116 |           element.setAttribute(i, attrs[i]);
117 |         }
118 |       }
119 |       return element;
120 |     }
121 |   };
122 | 
123 |   // backgroundBlur PUBLIC CLASS DEFINITION
124 |   // ================================
125 | 
126 |   var Blur = function (element, options) {
127 |     this.internalID   = randomID();
128 |     this.$element     = $(element);
129 |     this.$width       = this.$element.width();
130 |     this.$height      = this.$element.height();
131 |     this.element      = element;
132 |     this.options      = $.extend({}, Blur.DEFAULTS, options);
133 |     this.$overlayEl   = this.createOverlay();
134 |     this.$blurredImage = {};
135 |     this.useVelocity = this.detectVelocity(); // If Velocity.js is present, use it for performant animation
136 |     this.attachListeners();
137 |     this.generateBlurredImage(this.options.imageURL);
138 |   };
139 | 
140 |   Blur.VERSION  = '0.1.1';
141 | 
142 |   Blur.DEFAULTS = {
143 |     imageURL      : '', // URL to the image
144 |     blurAmount    : 10, // Amount of blurrines
145 |     imageClass    : '', // CSS class that will be applied to the image and to the SVG element,
146 |     overlayClass  : '', // CSS class of the element that will overlay the blur image
147 |     duration      : false, // If the image needs to be faded in, how long should that take
148 |     opacity       : 1 // Specify the final opacity
149 |   };
150 | 
151 |   Blur.prototype.detectVelocity= function() {
152 |     return !!window.jQuery.Velocity;
153 |   };
154 | 
155 |   Blur.prototype.attachListeners = function() {
156 |     this.$element.on('ui.blur.loaded', $.proxy(this.fadeIn, this));
157 |     this.$element.on('ui.blur.unload', $.proxy(this.fadeOut, this));
158 |   };
159 | 
160 |   Blur.prototype.fadeIn = function () {
161 |     if (this.options.duration && this.options.duration > 0) {
162 |       if (this.useVelocity) {
163 |         this.$blurredImage
164 |           .velocity({
165 |             opacity: this.options.opacity
166 |           }, {
167 |             duration: this.options.duration
168 |           });
169 |       } else {
170 |         this.$blurredImage
171 |           .animate({
172 |             opacity: this.options.opacity
173 |           }, {
174 |             duration: this.options.duration
175 |           });
176 |       }
177 | 
178 |     }
179 |   };
180 | 
181 |   Blur.prototype.fadeOut = function () {
182 |     if (this.options.duration && this.options.duration > 0) {
183 |       if (this.useVelocity) {
184 |         this.$blurredImage
185 |           .velocity({
186 |             opacity: 0
187 |           }, {
188 |             duration: this.options.duration
189 |           });
190 |       } else {
191 |         this.$blurredImage
192 |           .animate({
193 |             opacity: 0
194 |           }, {
195 |             duration: this.options.duration
196 |           });
197 |       }
198 | 
199 |     } else {
200 |       this.$blurredImage.css({'opacity' : 0 });
201 |     }
202 |   };
203 | 
204 |   Blur.prototype.generateBlurredImage = function (url) {
205 |     var $previousImage = this.$blurredImage;
206 |     this.internalID = randomID();
207 | 
208 |     if( $previousImage.length > 0) {
209 |       if (this.options.duration && this.options.duration > 0) {
210 |         if (this.useVelocity) {
211 |           $previousImage.first().velocity({ opacity: 0 },{
212 |             duration : this.options.duration,
213 |             complete : function() {
214 |               $previousImage.remove();
215 |             }
216 |           });
217 |         } else {
218 |           $previousImage.first().animate({ opacity: 0 },{
219 |             duration : this.options.duration,
220 |             complete : function() {
221 |               $previousImage.remove();
222 |             }
223 |           });
224 |         }
225 |       } else {
226 |         $previousImage.remove();
227 |       }
228 | 
229 |     }
230 |     if (!ie) {
231 |       this.$blurredImage = this.createSVG(url, this.$width, this.$height);
232 |     } else {
233 |       this.$blurredImage = this.createIMG(url, this.$width, this.$height);
234 |     }
235 |   };
236 | 
237 |   Blur.prototype.createOverlay = function () {
238 |     if (this.options.overlayClass && this.options.overlayClass !== ''){
239 |       return $('<div></div>').prependTo(this.$element).addClass(this.options.overlayClass);
240 |     }
241 | 
242 |     return false;
243 |   };
244 | 
245 |   Blur.prototype.createSVG = function(url, width, height){
246 |     var that = this;
247 |     var svg = SVG.createElement('svg', { //our SVG element
248 |       xmlns: SVG.svgns,
249 |       version: '1.1',
250 |       width: width,
251 |       height: height,
252 |       id: 'blurred' + this.internalID,
253 |       'class': this.options.imageClass,
254 |       viewBox: '0 0 ' + width + ' '+ height,
255 |       preserveAspectRatio: 'none'
256 |     });
257 | 
258 |     var filterId = 'blur' + this.internalID; //id of the filter that is called by image element
259 |     var filter = SVG.createElement('filter', { //filter
260 |       id: filterId
261 |     });
262 | 
263 |     var gaussianBlur = SVG.createElement('feGaussianBlur', { // gaussian blur element
264 |       'in': 'SourceGraphic', //"in" is keyword. Opera generates an error if we don't put quotes
265 |       stdDeviation: this.options.blurAmount // intensity of blur
266 |     });
267 | 
268 |     var image = SVG.createElement('image', { //The image that uses the filter of blur
269 |       x: 0,
270 |       y: 0,
271 |       width: width,
272 |       height: height,
273 |       'externalResourcesRequired' : 'true',
274 |       href: url,
275 |       style: 'filter:url(#' + filterId + ')', //filter link
276 |       preserveAspectRatio: 'none'
277 |     });
278 | 
279 |     image.addEventListener('load', function() {
280 |       that.$element.trigger('ui.blur.loaded');
281 |     }, true);
282 | 
283 |     image.addEventListener('SVGLoad', function() {
284 |       that.$element.trigger('ui.blur.loaded');
285 |     }, true);
286 | 
287 |     filter.appendChild(gaussianBlur); //adding the element of blur into the element of filter
288 |     svg.appendChild(filter); //adding the filter into the SVG
289 |     svg.appendChild(image); //adding an element of an image into the SVG
290 |     var $svg = $(svg);
291 | 
292 |     // Ensure that the image is shown after duration + 100 msec in case the SVG load event didn't fire or took too long
293 |     if (that.options.duration && that.options.duration > 0) {
294 |       $svg.css({ opacity : 0});
295 |       window.setTimeout(function(){
296 |         if ($svg.css('opacity') === '0') {
297 |           $svg.css({ opacity : 1});
298 |         }
299 |       }, this.options.duration + 100);
300 |     }
301 |     this.element.insertBefore(svg, this.element.firstChild);
302 |     return $svg;
303 |   };
304 | 
305 |   Blur.prototype.createIMG = function(url, width, height){
306 |     var that = this;
307 |     var $originalImage = this.prependImage(url);
308 |     var newBlurAmount = ((this.options.blurAmount * 2) > 100) ? 100 : (this.options.blurAmount * 2);
309 |     // apply special CSS attributes to the image to blur it
310 |     $originalImage.css({
311 |       //filter property; here the intensity of blur multipied by two is around equal to the intensity in common browsers.
312 |       filter: 'progid:DXImageTransform.Microsoft.Blur(pixelradius=' + newBlurAmount + ') ',
313 |       //aligning of the blurred image by vertical and horizontal
314 |       top: -this.options.blurAmount * 2.5,
315 |       left: -this.options.blurAmount * 2.5,
316 |       width: width + (this.options.blurAmount * 2.5),
317 |       height: height + (this.options.blurAmount * 2.5) })
318 |       .attr('id', 'blurred' + this.internalID);
319 | 
320 |     $originalImage.load(function(){
321 |       that.$element.trigger('ui.blur.loaded');
322 |     });
323 | 
324 |     // Ensure that the image is shown after duration + 100 msec in case the image load event didn't fire or took too long
325 |     if (this.options.duration && this.options.duration > 0) {
326 |       window.setTimeout(function(){
327 |         if ($originalImage.css('opacity') === '0') {
328 |           $originalImage.css({ opacity : 1});
329 |         }
330 |       }, this.options.duration + 100);
331 |     }
332 |     return $originalImage;
333 |   };
334 | 
335 |   Blur.prototype.prependImage = function(url) {
336 |     var $image;
337 |     var $imageEl = $('<img src="'+url+'" />');
338 |     if (this.$overlayEl) {
339 |       $image = $imageEl.insertBefore(this.$overlayEl).attr('id', this.internalID).addClass(this.options.imageClass);
340 |     } else {
341 |       $image = $imageEl.prependTo(this.$element).attr('id', this.internalID).addClass(this.options.imageClass);
342 |     }
343 | 
344 |     return $image;
345 |   };
346 |   // backgroundBlur PLUGIN DEFINITION
347 |   // ==========================
348 | 
349 |   function Plugin(option) {
350 |     return this.each(function () {
351 |       var $this   = $(this);
352 |       var data    = $this.data('plugin.backgroundBlur');
353 |       var options = $.extend({}, Blur.DEFAULTS, $this.data(), typeof option === 'object' && option);
354 | 
355 |       if (!data) {
356 |         $this.data('plugin.backgroundBlur', (data = new Blur(this, options)));
357 |       }
358 |       if (option === 'fadeIn') {
359 |         data.fadeIn();
360 |       } else if (option === 'fadeOut') {
361 |         data.fadeOut();
362 |       } else if (typeof option === 'string') {
363 |         data.generateBlurredImage(option);
364 |       }
365 |     });
366 |   }
367 | 
368 |   var old = $.fn.backgroundBlur;
369 | 
370 |   $.fn.backgroundBlur             = Plugin;
371 |   $.fn.backgroundBlur.Constructor = Blur;
372 | 
373 |   // NO CONFLICT
374 |   // ====================
375 | 
376 |   $.fn.backgroundBlur.noConflict = function () {
377 |     $.fn.backgroundBlur = old;
378 |     return this;
379 |   };
380 | 
381 | })(jQuery);
382 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head lang="en">
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  6 |     <title>Background Blur - plugin by @msurguy</title>
  7 |     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/paper/bootstrap.min.css"/>
  8 | 
  9 |     <!--[if gte IE 9]>
 10 |     <style type="text/css">
 11 |         .gradient {
 12 |             filter: none;
 13 |         }
 14 |     </style>
 15 |     <![endif]-->
 16 | 
 17 |     <style>
 18 |         /* Container that will contain blurred image and other content */
 19 |         #preview-container {
 20 |             overflow: hidden;
 21 |             position: relative;
 22 |             width:100%;
 23 |         }
 24 | 
 25 |         #preview {
 26 |             height: 300px;
 27 |         }
 28 | 
 29 |         /* Plugin will add this class to blurred image, providing you with control over certain aspects */
 30 |         .bg-blur {
 31 |             z-index: -2;
 32 |             opacity: 0;
 33 |             position: absolute;
 34 |             min-height: 100%;
 35 |             height: auto;
 36 |             display: block;
 37 |             top: 0;
 38 |             max-height: none;
 39 |             /* Add this CSS to remove transparent border around the image */
 40 |             left: -10%;
 41 |             width: 120%;
 42 |         }
 43 | 
 44 |         /*
 45 |             An element with this class is added by the plugin to provide an overlay above the blurred image
 46 |             It could drastically improve the appearance of the blurred image for content readability
 47 |         */
 48 |         .bg-blur-overlay {
 49 |             z-index: -1;
 50 |             position: absolute;
 51 |             width: 100%;
 52 |             height: 100%;
 53 | 
 54 |             /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&amp;0.15+0,1+100 */
 55 |             /* IE9 SVG, needs conditional override of 'filter' to 'none' */
 56 |             background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjE1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
 57 |             background: -moz-linear-gradient(top,  rgba(0,0,0,0.15) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
 58 |             background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.15)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
 59 |             background: -webkit-linear-gradient(top,  rgba(0,0,0,0.15) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
 60 |             background: -o-linear-gradient(top,  rgba(0,0,0,0.15) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
 61 |             background: -ms-linear-gradient(top,  rgba(0,0,0,0.15) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
 62 |             background: linear-gradient(to bottom,  rgba(0,0,0,0.15) 0%,rgba(0,0,0,1) 100%); /* W3C */
 63 |             filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#26000000', endColorstr='#000000',GradientType=0 ); /* IE6-8 */
 64 |         }
 65 | 
 66 |         /* Content */
 67 |         #preview-container .content {
 68 |             z-index: 1;
 69 |             color: #FFF;
 70 |             text-align: center;
 71 |         }
 72 | 
 73 |         .jumbotron {
 74 |             background-color: inherit;
 75 |         }
 76 |         .jumbotron h1, .jumbotron h2 {
 77 |             color: #FFF;
 78 |         }
 79 | 
 80 |         .avatar-holder {
 81 |             overflow: hidden;
 82 |             height: 200px;
 83 |             text-align: center;
 84 |             position: relative;
 85 |         }
 86 | 
 87 |         .avatar-container {
 88 |             padding-top: 50px;
 89 |         }
 90 | 
 91 |         .avatar {
 92 |             display: inline-block;
 93 |             position: relative;
 94 |         }
 95 | 
 96 |         .avatar img {
 97 |             width: 100px;
 98 |             height: 100px;
 99 |             -webkit-border-radius: 50%;
100 |             -moz-border-radius: 50%;
101 |             border-radius: 50%;
102 |             border: 5px solid rgba(255,255,255,0.8);
103 |             transition: 0.3s;
104 |             cursor: pointer;
105 | 
106 |         }
107 | 
108 |         .avatar img:hover {
109 |             border: 5px solid rgba(90,96,200,0.8);
110 | 
111 |         }
112 | 
113 |         .avatar-blur {
114 |             z-index: -2;
115 |             position: absolute;
116 |             min-height: 100%;
117 |             height: auto;
118 |             display: block;
119 |             top: 0;
120 |             max-height: none;
121 |             /* Add this CSS to remove transparent border around the image */
122 |             left: -10%;
123 |             width: 120%;
124 |         }
125 | 
126 |         .tinted-thumbnails img{
127 |             width: 25%;
128 |             float:left;
129 |             cursor: pointer;
130 |         }
131 | 
132 |         #tinted-holder {
133 |             height: 300px;
134 |             overflow: hidden;
135 |             position: relative;
136 |             width:100%;
137 |         }
138 | 
139 |         /* Plugin will add this class to blurred image, providing you with control over certain aspects */
140 |         .tinted-bg-blur {
141 |             z-index: -2;
142 |             opacity: 0;
143 |             position: absolute;
144 |             min-height: 100%;
145 |             height: auto;
146 |             display: block;
147 |             top: 0;
148 |             max-height: none;
149 |             /* Add this CSS to remove transparent border around the image */
150 |             left: -10%;
151 |             width: 120%;
152 |         }
153 | 
154 |         /*
155 |             An element with this class is added by the plugin to provide an overlay above the blurred image
156 |             It could drastically improve the appearance of the blurred image for content readability
157 |         */
158 |         .tinted-bg-overlay {
159 |             z-index: -1;
160 |             position: absolute;
161 |             width: 100%;
162 |             height: 100%;
163 | 
164 |             /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ba43a8+0,ea4fce+62,537bad+100&amp;0.38+0,0.17+61,0.8+100 */
165 |             /* IE9 SVG, needs conditional override of 'filter' to 'none' */
166 |             background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjYmE0M2E4IiBzdG9wLW9wYWNpdHk9IjAuMzgiLz4KICAgIDxzdG9wIG9mZnNldD0iNjElIiBzdG9wLWNvbG9yPSIjZTk0ZmNkIiBzdG9wLW9wYWNpdHk9IjAuMTciLz4KICAgIDxzdG9wIG9mZnNldD0iNjIlIiBzdG9wLWNvbG9yPSIjZWE0ZmNlIiBzdG9wLW9wYWNpdHk9IjAuMTkiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzUzN2JhZCIgc3RvcC1vcGFjaXR5PSIwLjgiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
167 |             background: -moz-linear-gradient(-45deg,  rgba(186,67,168,0.38) 0%, rgba(233,79,205,0.17) 61%, rgba(234,79,206,0.19) 62%, rgba(83,123,173,0.8) 100%); /* FF3.6+ */
168 |             background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(186,67,168,0.38)), color-stop(61%,rgba(233,79,205,0.17)), color-stop(62%,rgba(234,79,206,0.19)), color-stop(100%,rgba(83,123,173,0.8))); /* Chrome,Safari4+ */
169 |             background: -webkit-linear-gradient(-45deg,  rgba(186,67,168,0.38) 0%,rgba(233,79,205,0.17) 61%,rgba(234,79,206,0.19) 62%,rgba(83,123,173,0.8) 100%); /* Chrome10+,Safari5.1+ */
170 |             background: -o-linear-gradient(-45deg,  rgba(186,67,168,0.38) 0%,rgba(233,79,205,0.17) 61%,rgba(234,79,206,0.19) 62%,rgba(83,123,173,0.8) 100%); /* Opera 11.10+ */
171 |             background: -ms-linear-gradient(-45deg,  rgba(186,67,168,0.38) 0%,rgba(233,79,205,0.17) 61%,rgba(234,79,206,0.19) 62%,rgba(83,123,173,0.8) 100%); /* IE10+ */
172 |             background: linear-gradient(135deg,  rgba(186,67,168,0.38) 0%,rgba(233,79,205,0.17) 61%,rgba(234,79,206,0.19) 62%,rgba(83,123,173,0.8) 100%); /* W3C */
173 |             filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#61ba43a8', endColorstr='#cc537bad',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
174 | 
175 |         }
176 | 
177 |         .video-bg-container {
178 |             overflow: hidden;
179 |             position: relative;
180 |             width:100%;
181 |         }
182 | 
183 |         .video-thumbnails img {
184 |             width: 25%;
185 |             float:left;
186 |             cursor: pointer;
187 |         }
188 | 
189 |     </style>
190 | 
191 |     <link href="//vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
192 |     <script src="//vjs.zencdn.net/4.12/video.js"></script>
193 | 
194 | </head>
195 | <body>
196 | <a href="https://github.com/msurguy/background-blur"><img style="position: absolute; top: 0; right: 0; border: 0; z-index:1000" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
197 | <div id="preview-container">
198 |     <div id="preview">
199 |         <div class="container jumbotron">
200 |             <div class="row">
201 |                 <div class="col-md-12">
202 |                     <div class="content">
203 |                         <h1>Image Blur Plugin</h1>
204 |                         <p>Ultra small plugin (4kb minified, 1.5kb gzipped) for Blurring images</p>
205 |                         <a href="https://twitter.com/share" style="padding-top:10px;" class="twitter-share-button" data-via="msurguy" data-hashtags="webdesign">Tweet</a>
206 |                         <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
207 |                     </div>
208 |                 </div>
209 |             </div>
210 |         </div>
211 |     </div>
212 | </div>
213 | <div class="container">
214 |     <div class="row">
215 |         <div class="col-md-12">
216 |             <div class="page-header">
217 |                 <h2>Switch Header Image:</h2>
218 |             </div>
219 |         </div>
220 |     </div>
221 |     <div class="row">
222 |         <div class="col-md-3 col-sm-6 col-xs-6">
223 |             <a href="#" class="preview-btn thumbnail">
224 |                 <img class="img-responsive" src="https://ununsplash.imgix.net/photo-1429277096327-11ee3b761c93?q=75&fm=jpg&w=400&fit=max" alt=""/>
225 |             </a>
226 |         </div>
227 | 
228 |         <div class="col-md-3 col-sm-6 col-xs-6">
229 |             <a href="#" class="preview-btn thumbnail">
230 |                 <img class="img-responsive" src="https://unsplash.imgix.net/photo-1429042007245-890c9e2603af?fit=crop&fm=jpg&q=75&w=400" alt=""/>
231 |             </a>
232 |         </div>
233 | 
234 |         <div class="col-md-3 col-sm-6 col-xs-6">
235 |             <a href="#" class="preview-btn thumbnail">
236 |                 <img class="img-responsive" src="https://ununsplash.imgix.net/photo-1429030150151-548690082f0b?fit=crop&fm=jpg&q=75&w=400" alt=""/>
237 |             </a>
238 |         </div>
239 | 
240 |         <div class="col-md-3 col-sm-6 col-xs-6">
241 |             <a href="#" class="preview-btn thumbnail">
242 |                 <img class="img-responsive" src="https://unsplash.imgix.net/photo-1424746219973-8fe3bd07d8e3?fit=crop&fm=jpg&q=75&w=400" alt=""/>
243 |             </a>
244 |         </div>
245 |     </div>
246 | 
247 |     <div class="row">
248 |         <div class="col-md-12">
249 |             <div class="page-header">
250 |                 <h2>Usage: </h2>
251 |             </div>
252 |         </div>
253 |     </div>
254 | 
255 |     <div class="row">
256 |         <div class="col-md-12">
257 |             <p>Install this plugin with Bower: </p>
258 |             <pre>bower install background-blur</pre>
259 |             <p>Or manually:</p>
260 |             <pre>&lt;script src="jquery.min.js"&gt;&lt;/script&gt;
261 | &lt;script src="background-blur.min.js"&gt;&lt;/script&gt;</pre>
262 |             <p>Create a container which will contain the blurred image:</p>
263 |             <pre>&lt;div id='some-element'&gt;&lt;/div&gt;</pre>
264 |             <p>Then create a blurred image in that container:</p>
265 |             <pre>$('#some-element').backgroundBlur({
266 |     imageURL : 'http://URL-of-the-image',
267 |     blurAmount : 50,
268 |     imageClass : 'bg-blur'
269 | });</pre>
270 |             <p>OR Create a blurred image and fade it in:</p>
271 |             <pre>$('#some-element').backgroundBlur({
272 |     imageURL : 'http://URL-of-the-image',
273 |     blurAmount : 50,
274 |     imageClass : 'bg-blur'
275 |     duration: 1000, // If the image needs to be faded in, how long that should take
276 |     endOpacity : 1 // Specify the final opacity that the image will have
277 | });</pre>
278 |             <p>OR Create a blurred image, fade it in and switch to another image:</p>
279 |             <pre>// Initialize the blur
280 | $('#some-element').backgroundBlur({
281 |     imageURL : 'http://URL-of-the-image',
282 |     blurAmount : 50,
283 |     imageClass : 'bg-blur'
284 |     duration: 1000, // If the image needs to be faded in, how long that should take
285 |     endOpacity : 1 // Specify the final opacity that the image will have
286 | });
287 | 
288 | //Switch the image
289 | $('#some-element').backgroundBlur('http://URL-of-another-image');</pre>
290 |         </div>
291 |     </div>
292 | 
293 |     <div class="row">
294 |         <div class="col-md-12">
295 |             <div class="page-header">
296 |                 <h2>More demos:</h2>
297 |             </div>
298 |         </div>
299 |     </div>
300 | 
301 |     <div class="row">
302 |         <div class="col-md-6">
303 |             <p>Avatar-based backgrounds (click):</p>
304 |             <div class="avatar-holder">
305 |                 <div class="avatar-container">
306 |                     <div class="avatar">
307 |                         <img src="//www.gravatar.com/avatar/54798cdd1ba8472c5011ae892bb06942?s=100" alt="@msurguy"/>
308 |                     </div>
309 |                     <div class="avatar">
310 |                         <img src="//s3.amazonaws.com/uifaces/faces/twitter/gt/128.jpg" alt="@gt">
311 |                     </div>
312 |                     <div class="avatar">
313 |                         <img src="//s3.amazonaws.com/uifaces/faces/twitter/mijustin/128.jpg" alt="@mijustin">
314 |                     </div>
315 |                 </div>
316 |             </div>
317 |             <br/>
318 |             <p>Code: </p>
319 |             <pre>
320 | $avatarHolderEl.backgroundBlur({
321 |     imageURL : avatars[0],
322 |     blurAmount : 50,
323 |     imageClass : 'avatar-blur'
324 | });
325 | </pre>
326 | 
327 |         </div>
328 |         <div class="col-md-6">
329 |             <p>Tinted overlays:</p>
330 |             <div id="tinted-holder"></div>
331 |             <div class="tinted-thumbnails">
332 |                 <img src="https://ununsplash.imgix.net/photo-1429277096327-11ee3b761c93?q=75&fm=jpg&w=400&fit=max" alt=""/>
333 |                 <img src="https://unsplash.imgix.net/photo-1424746219973-8fe3bd07d8e3?fit=crop&fm=jpg&q=75&w=400" alt=""/>
334 |                 <img src="https://ununsplash.imgix.net/photo-1429030150151-548690082f0b?fit=crop&fm=jpg&q=75&w=400" alt=""/>
335 |                 <img src="https://unsplash.imgix.net/photo-1429042007245-890c9e2603af?fit=crop&fm=jpg&q=75&w=400" alt=""/>
336 |             </div>
337 |             <!-- Nav tabs -->
338 |             <ul class="nav nav-tabs" role="tablist">
339 |                 <li role="presentation" class="active"><a href="#tinted-js" aria-controls="home" role="tab" data-toggle="tab">JS</a></li>
340 |                 <li role="presentation"><a href="#tinted-css" aria-controls="css" role="tab" data-toggle="tab">CSS</a></li>
341 |             </ul>
342 | 
343 |             <!-- Tab panes -->
344 |             <div class="tab-content">
345 |                 <div role="tabpanel" class="tab-pane active" id="tinted-js">
346 |                     <pre>$tintedHolderEl.backgroundBlur({
347 |     imageURL : 'url-of-the-image',
348 |     blurAmount : 10,
349 |     imageClass : 'tinted-bg-blur',
350 |     overlayClass : 'tinted-bg-overlay',
351 |     duration: 1000,
352 |     endOpacity : 1
353 | });</pre>
354 |                 </div>
355 |                 <div role="tabpanel" class="tab-pane" id="tinted-css">
356 |                     <pre>.tinted-bg-blur {
357 |     z-index: -2;
358 |     opacity: 0;
359 |     position: absolute;
360 |     min-height: 100%;
361 |     height: auto;
362 |     display: block;
363 |     top: 0;
364 |     max-height: none;
365 |     /* Add this CSS to remove transparent border around the image */
366 |     left: -10%;
367 |     width: 120%;
368 | }
369 | 
370 | .tinted-bg-overlay {
371 |     z-index: -1;
372 |     position: absolute;
373 |     width: 100%;
374 |     height: 100%;
375 |     background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZWE0ZmNlIiBzdG9wLW9wYWNpdHk9IjAuOTYiLz4KICAgIDxzdG9wIG9mZnNldD0iNjclIiBzdG9wLWNvbG9yPSIjNmE1ZmMyIiBzdG9wLW9wYWNpdHk9IjAuMTciLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzJiNjdiYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
376 |     background: -moz-linear-gradient(-45deg,  rgba(234,79,206,0.96) 0%, rgba(106,95,194,0.17) 67%, rgba(43,103,188,1) 100%); /* FF3.6+ */
377 |     background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(234,79,206,0.96)), color-stop(67%,rgba(106,95,194,0.17)), color-stop(100%,rgba(43,103,188,1))); /* Chrome,Safari4+ */
378 |     background: -webkit-linear-gradient(-45deg,  rgba(234,79,206,0.96) 0%,rgba(106,95,194,0.17) 67%,rgba(43,103,188,1) 100%); /* Chrome10+,Safari5.1+ */
379 |     background: -o-linear-gradient(-45deg,  rgba(234,79,206,0.96) 0%,rgba(106,95,194,0.17) 67%,rgba(43,103,188,1) 100%); /* Opera 11.10+ */
380 |     background: -ms-linear-gradient(-45deg,  rgba(234,79,206,0.96) 0%,rgba(106,95,194,0.17) 67%,rgba(43,103,188,1) 100%); /* IE10+ */
381 |     background: linear-gradient(135deg,  rgba(234,79,206,0.96) 0%,rgba(106,95,194,0.17) 67%,rgba(43,103,188,1) 100%); /* W3C */
382 |     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5ea4fce', endColorstr='#2b67bc',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
383 | }
384 |  </pre>
385 |                 </div>
386 |             </div>
387 |         </div>
388 |     </div>
389 |     <div class="row">
390 |         <div class="col-md-12">
391 |             <p class="lead">Using video thubmbnail to create ambient background for a player (like on <a target="_blank" href="http://www.nbcnews.com/video">http://www.nbcnews.com/video</a>):</p>
392 |         </div>
393 |     </div>
394 | 
395 | </div>
396 | 
397 | <div class="video-bg-container">
398 |     <div id="video-bg">
399 |         <div class="container">
400 |             <div class="row">
401 |                 <div class="col-md-6 col-md-offset-3">
402 |                     <!-- 16:9 aspect ratio -->
403 |                     <div class="embed-responsive embed-responsive-16by9">
404 |                         <video id="video-element" class="video-js vjs-default-skin vjs-big-play-centered embed-responsive-item"
405 |                                controls preload="auto" width="auto" height="auto"
406 |                                poster="dist/video/lookup/lookup.jpg">
407 |                             <source src="dist/video/lookup/lookup.mp4" type='video/mp4' />
408 |                             <source src="dist/video/lookup/lookup.webm" type='video/webm' />
409 |                             <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
410 |                         </video>
411 |                     </div>
412 |                     <div class="video-thumbnails">
413 |                         <img data-mp4="dist/video/lookup/lookup.mp4" data-webm="dist/video/lookup/lookup.webm" src="dist/video/lookup/lookup.jpg" alt=""/>
414 |                         <img data-mp4="dist/video/frankincense/frankincense.mp4" data-webm="dist/video/frankincense/frankincense.webm" src="dist/video/frankincense/frankincense.jpg" alt=""/>
415 |                         <img data-mp4="dist/video/breathingbarcelona/breathingbarcelona.mp4" data-webm="dist/video/breathingbarcelona/breathingbarcelona.webm" src="dist/video/breathingbarcelona/barcelona.jpg" alt=""/>
416 |                         <img data-mp4="dist/video/nightoflighthouse/nightoflighthouse.mp4" data-webm="dist/video/nightoflighthouse/nightoflighthouse.webm" src="dist/video/nightoflighthouse/night.jpg" alt=""/>
417 |                     </div>
418 |                 </div>
419 |             </div>
420 |         </div>
421 |     </div>
422 | </div>
423 | 
424 | <div class="container">
425 |     <div class="row">
426 |         <div class="col-md-12">
427 |             <div class="page-header">
428 |                 <h2>Browser Support: </h2>
429 |             </div>
430 |         </div>
431 |     </div>
432 |     <div class="row">
433 |         <div class="col-md-12">
434 |             <ul>
435 |                 <li>Chrome</li>
436 |                 <li>Firefox</li>
437 |                 <li>Safari and Safari Mobile (iOS)</li>
438 |                 <li>IE6, IE7, IE8 - blur is supported without animation (need to omit "duration" property in those browsers to make this plugin work, the problem will get fixed when <a target="_blank" href="https://github.com/julianshapiro/velocity/issues/506">Velocity.js issue gets fixed</a>)</li>
439 |                 <li>IE9, IE10, IE11</li>
440 |                 <li>Android browsers</li>
441 |                 <li>Possibly, more. Please let me know if some browser doesn't work</li>
442 |             </ul>
443 |         </div>
444 |     </div>
445 | 
446 |     <div class="row">
447 |         <div class="col-md-12">
448 |             <div class="page-header">
449 |                 <h2>Under the hood: </h2>
450 |             </div>
451 |         </div>
452 |     </div>
453 |     <div class="row">
454 |         <div class="col-md-12">
455 |             <p>This plugin utilizes SVG filter to blur the image if SVG is supported by the browser (all except IE), otherwise the plugin creates an IMG tag and applies a special IE-only filter in CSS</p>
456 |             <p><strong>Q: </strong>Why not simply use CSS 3 blur filter? <br/><strong>A:</strong>The browser support for SVG blur filter is much wider when it comes to older browsers.</p>
457 |         </div>
458 |     </div>
459 | 
460 |     <div class="row">
461 |         <div class="col-md-12">
462 |             <div class="page-header">
463 |                 <h2><a href="https://julian.com/research/velocity/" target="_blank">Velocity.js support</a>: </h2>
464 |             </div>
465 |         </div>
466 |     </div>
467 |     <div class="row">
468 |         <div class="col-md-12">
469 |             <p>If you are using <a href="https://julian.com/research/velocity/" target="_blank">Velocity.js</a> animation library, the plugin will automatically detect its presence and make fade in/fade out animations more performant, especially on mobile. If Velocity is not present on the page, jQuery's "animate" is used</p>
470 |         </div>
471 |     </div>
472 | 
473 |     <div class="row">
474 |         <div class="col-md-12">
475 |             <div class="page-header">
476 |                 <h2>License: </h2>
477 |             </div>
478 |         </div>
479 |     </div>
480 |     <div class="row">
481 |         <div class="col-md-12">
482 |             <p>This plugin is released under MIT license, giving you permission to use for commercial and non-commercial projects</p>
483 |         </div>
484 |     </div>
485 |     
486 | </div>
487 | <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
488 | <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
489 | <script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>
490 | 
491 | 
492 | <script src="dist/background-blur.min.js"></script>
493 | <script>
494 |     // Scripts for demo page
495 |     $( document ).ready(function() {
496 |         var $previewEl = $('#preview');
497 |         var $avatarEl = $('.avatar');
498 |         var $avatarHolderEl = $('.avatar-holder');
499 |         var $tintedEl = $('.tinted-thumbnails img');
500 |         var $tintedHolderEl = $('#tinted-holder');
501 |         var $videoBGEl = $('#video-bg');
502 |         var $videoBgImages = $('.video-thumbnails img');
503 |         var $videoEl = document.getElementById('video-element');
504 | 
505 |         var images = [];
506 |         var avatars = [];
507 |         // Simple slideshow
508 |         $('.preview-btn').each(function(){
509 |             var $el = $(this);
510 |             var img = $el.find('img').first().attr('src');
511 |             images.push(img);
512 | 
513 |             $el.click(function(e){
514 |                 e.preventDefault();
515 | 
516 |                 $previewEl.backgroundBlur(img);
517 |             });
518 |         });
519 | 
520 |         $previewEl.backgroundBlur({
521 |             imageURL : images[0], // URL to the image that will be used for blurring
522 |             blurAmount : 10, // Amount of blur (higher amount degrades browser performance)
523 |             imageClass : 'bg-blur', // CSS class that will be applied to the image and to the SVG element,
524 |             overlayClass : 'bg-blur-overlay', // CSS class of an element that will overlay the blur background (useful for additional effects or putting a spinner)
525 |             duration: 1000, // If the image needs to be faded in, how long that should take
526 |             endOpacity : 1 // Specify the final opacity that the image will have
527 |         });
528 | 
529 |         // Avatar - based backgrounds
530 |         $avatarEl.each(function(){
531 |             var $avatar = $(this);
532 |             var avatarImage = $avatar.find('img').first().attr('src');
533 |             avatars.push(avatarImage);
534 |             $avatar.click(function(e){
535 |                 e.preventDefault();
536 | 
537 |                 $avatarHolderEl.backgroundBlur(avatarImage);
538 |             });
539 |         });
540 | 
541 |         $avatarHolderEl.backgroundBlur({
542 |             imageURL : avatars[0], // URL to the image that will be used for blurring
543 |             blurAmount : 50, // Amount of blur (higher amount degrades browser performance)
544 |             imageClass : 'avatar-blur' // CSS class that will be applied to the image and to the SVG element,
545 |         });
546 | 
547 |         // Avatar - based backgrounds
548 |         $tintedEl.each(function(){
549 |             var $el = $(this);
550 |             var avatarImage = $el.attr('src');
551 |             $el.click(function(e){
552 |                 e.preventDefault();
553 |                 $tintedHolderEl.backgroundBlur(avatarImage);
554 |             });
555 |         });
556 | 
557 |         $tintedHolderEl.backgroundBlur({
558 |             imageURL : images[0], // URL to the image that will be used for blurring
559 |             blurAmount : 10, // Amount of blur (higher amount degrades browser performance)
560 |             imageClass : 'tinted-bg-blur', // CSS class that will be applied to the image and to the SVG element,
561 |             overlayClass : 'tinted-bg-overlay', // CSS class of an element that will overlay the blur background (useful for additional effects or putting a spinner)
562 |             duration: 1000, // If the image needs to be faded in, how long that should take
563 |             endOpacity : 1 // Specify the final opacity that the image will have
564 |         });
565 | 
566 |         // Video background blur
567 |         var videoPlayer = videojs($videoEl);
568 |         $videoBGEl.backgroundBlur({
569 |             imageURL : 'dist/video/lookup/lookup.jpg', // URL to the image that will be used for blurring
570 |             blurAmount : 10, // Amount of blur (higher amount degrades browser performance)
571 |             imageClass : 'bg-blur', // CSS class that will be applied to the image and to the SVG element,
572 |             overlayClass : 'bg-blur-overlay', // CSS class of an element that will overlay the blur background (useful for additional effects or putting a spinner)
573 |             duration: 1000, // If the image needs to be faded in, how long that should take
574 |             endOpacity : 1 // Specify the final opacity that the image will have
575 |         });
576 | 
577 |         $videoBgImages.each(function(){
578 |             var $el = $(this);
579 |             var avatarImage = $el.attr('src');
580 |             $el.click(function(e){
581 |                 e.preventDefault();
582 |                 videoPlayer.src ([
583 |                     { type: 'video/mp4', src: $el.data('mp4') },
584 |                     { type: 'video/webm', src: $el.data('webm') }
585 |                 ]);
586 |                 videoPlayer.poster(avatarImage);
587 |                 $videoBGEl.backgroundBlur(avatarImage);
588 |             });
589 |         });
590 | 
591 |     });
592 | 
593 | 
594 | </script>
595 | 
596 | </body>
597 | </html>
598 | 


--------------------------------------------------------------------------------