Align Elements Into A Circle - jQuery Incircle
File Size: | 2.9 KB |
---|---|
Views Total: | 3370 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Incircle is a tiny jQuery plugin that positions a group of elements (e.g. an unordered html list) into a circle around the first item.
The typical use of the plugin is to create a radial menu or circular social share widget on the webpage.
How to use it:
1. Load the main JavaScript jquery.incircle.js
after loading jQuery.
<script src="/path/to/jquery.slim.min.js"></script> <script src="/path/to/jquery.incircle.js"></script>
2. Attach the function to the elemeng group and done.
<ul id="example"> <li>Center</li> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> </ul>
$(function(){ $('#example').incircle(); });
3. Customize the circle type. 1 whole, 0.5 half, 0.25 quarter. Default: 1.
$('#example').incircle({ type : .5 });
4. Specify the distance from the center. Default: 12em.
$('#example').incircle({ radius : '10em' });
5. Set the top/left position.
$('#example').incircle({ top: '200px', left: '200px' });
6. Set the angle at which the animation begins.
$('#example').incircle({ start : -90 });
7. Set the angle at which the animation begins.
$('#example').incircle({ start : -90 });
Changelog:
2020-03-21
- JS updated
This awesome jQuery plugin is developed by peppelauro. For more Advanced Usages, please check the demo page or visit the official website.