Create iOS 7 Style Blur Effect with jQuery oblurlay Plugin
File Size: | 491 KB |
---|---|
Views Total: | 4666 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.