Align group of elements into a circle.
###Overview Take a group of elements and align them in a circle.
###Install ####Simple
<head>
...
<link rel="stylesheet" href="dbpas.aligntocircle.css">
<script src="dbpas.aligntocircle.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(e) {
var itemsInACircle = new dbpasAlignToCircle('#group', {
'radius': '200px',
'skip': '.ignore'
});
itemsInACircle.init();
}, false);
</script>
...
</head>
####With CSS Animation
<head>
...
<link rel="stylesheet" href="dbpas.aligntocircle.css">
<script src="dbpas.aligntocircle.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(e) {
var itemsInACircle = new dbpasAlignToCircle('#group', {
'animation': true,
'skip': '.ignore'
});
itemsInACircle.init();
}, false);
</script>
...
</head>
####With Greensock Animation Platform Support - GSAP
<head>
...
<link rel="stylesheet" href="dbpas.aligntocircle.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="dbpas.aligntocircle.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(e) {
var itemsInACircle = new dbpasAlignToCircle('#group', {
'animation': true,
'enableGSAP': true,
'skip': '.ignore'
});
itemsInACircle.init();
}, false);
</script>
...
</head>
###Options ####Default
Option | Description | Type | Default |
---|---|---|---|
animation |
Enable animation during alignment. | boolean |
false |
enableGSAP |
Use greensock animation platform vs css animation. | boolean |
false |
radius |
Distance from center, CSS units. | string |
12em |
reverseOrder |
Reverse order of elements in group. | boolean |
false |
skip |
Direct children in group to exclude from circle. | string |
null |
start |
Shift start from 0. | int |
-90 |
type |
Circle type; 1 whole, 0.5 half, 0.25 quarter. | int |
1 |
###Usage Group your elements inside any block element.
<body>
...
<div id="group">
<p class="ignore">Center</p>
<p>Item 2</p>
<p>Item 3</p>
<p>Item 4</p>
<p>Item 5</p>
</div>
...
</body>
##Tips
- If the formatting looks bad, be sure to setup
css
default overrides. Look to this[data-align-to-circle]
selector to fix most of your issues.