Align group of elements into a circle.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
LICENSE.md
README.md
dbpas.aligntocircle.css
dbpas.aligntocircle.js

README.md

dbpasAlignToCircle

Align group of elements into a circle.

###Overview Take a group of elements and align them in a circle.

Demo

###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.