jQuery Object Swirling Plugin with CSS3 and jQuery UI
| File Size: | 3.06KB |
|---|---|
| Views Total: | 1849 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
A jquery based plugin that allows you to swirl an object onto or off of the screen using CSS3 transforms property and jQuery UI.
Basic Usage:
1. Include necessary javascript files and css files on your html page
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> <script src="jquery.ui.effect-swirl.js"></script>
2. Create a button to toggle the effect
<button id="doSwirl_1">Toggle (1 spin, 1000ms)</button>
3. Create a object to swirl onto or off
<style>
#tester{
margin:200px;
padding:150px;
background:#ddd;
border:solid thin #777;
width:200px;
}
</style>
<div id="tester">Press one of the "Toggle" buttons above to test the swirl animation</div>
4. Call the plugin
<script type='text/javascript'>
$(window).load(function(){
var tester = $('#tester');
$('#doSwirl_1').click(function(){
tester.toggle('swirl',1000);
});
});
</script>
This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.











