jQuery Plugin For Text Blur Out And In Effects with CSS3 - Blur
| File Size: | 125 KB |
|---|---|
| Views Total: | 1613 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Blur is a simple jQuery plugin that enables you to fade in and out text with a blur effect. Based on jQuery transit library for smooth CSS3 transformations and transitions.
How to use it:
1. Load the required jQuery library and jQuery transit in your web page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.transit.js"></script>
2. Load the jQuery blur plugin after jQuery library.
<script type="text/javascript" src="jquery.blur.js"></script>
3. Wrap the text in an Html element.
<h2>jQuery Plugins</h2>
4. Animate the text at a certain speed on page load.
$('h2').blurOut(1000).blurIn(1000);
5. Or trigger the effect on click.
$('h2').click(function() {
$(this).blurOut(1000).blurIn(1000);
});
This awesome jQuery plugin is developed by Chris-Cates. For more Advanced Usages, please check the demo page or visit the official website.











