jQuery Object Swirling Plugin with CSS3 and jQuery UI

File Size: 3.06KB
Views Total: 1838
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Object Swirling Plugin with CSS3 and jQuery UI

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.