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 |
![jQuery Object Swirling Plugin with CSS3 and jQuery UI](https://www.jqueryscript.net/images/jQuery-Object-Swirling-Plugin-with-CSS3-jQuery-UI.jpg)
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.