Create iOS 7 Style Blur Effect with jQuery oblurlay Plugin

oblurlay is a jQuery plugin that implement a frosted glass-like blurred mask on any Html elements similar to the iOS 7 blur view. Works on modern web browsers which support CSS3 and SVG element.

Basic Usage:

1. Include the jQuery javascript library and the jQuery oblurlay plugin in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/oblurlay.js"></script>

2. Create the Html for the blurred mask layer and contents layer, and then wrap them in the parent element.

<div class="oblurlay">
<div class="oblurlay-upper"> 
upper layer
</div>
<div class="oblurlay-contents">
<div class="contents"> 
contents layer
</div>
</div>
</div>

3. Call the plugin on the parent element and you're done.

<script>
$(document).ready(function() {
$('.oblurlay').oblurlay();
});  
</script>

4. The required CSS rules to style the blurred mask.

.oblurlay-upper {
  height: 70px;
  overflow: hidden;
  background-color: #fff;
  border-bottom: #ccc;
}
.oblurlay-contents {
  position: relative;
  height: 70px;
}
.oblurlay-contents-clone {
  position: absolute;
  top: 0;
  width: 100%;
  opacity: .9;
}
.oblurlay-svg {
  height: 70px;
}

Change log:

2014-09-27

• Update

2014-08-20

• updated to v0.1.0.

2014-05-31

• update.

---

This awesome jQuery plugin is developed by blivesta. For more Advanced Usages, please check the demo page or visit the official website.