circular div

by Minh Nguyen

HTML

<ul class='circle-container'>
  <div class="info">
  <div class="center-info">
  <h1>INFOGRAPHICS</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
    </p>
  </div>
    
  </div>
  <li class="element">
    <img src='https://dummyimage.com/100x100/4286f4/fff' alt="..." />
    <div class="stick"></div>
  </li>
  <li class="element">
    <img src='https://dummyimage.com/100x100/4286f4/fff' alt="..." />
    <div class="stick"></div>
  </li>
  <li class="element">
    <img src='https://dummyimage.com/100x100/4286f4/fff' alt="..." />
    <div class="stick"></div>
  </li>
  <li class="element">
    <img src='https://dummyimage.com/100x100/4286f4/fff' alt="..." />
    <div class="stick"></div>
  </li>
  <li class="element">
    <img src='https://dummyimage.com/100x100/4286f4/fff' alt="..." />
    <div class="stick"></div>
  </li>
  <li class="element">
    <img src='https://dummyimage.com/100x100/4286f4/fff' alt="..." />
    <div class="stick"></div>
  </li>
  <li class="element">
    <img src='https://dummyimage.com/100x100/4286f4/fff' alt="..." />
    <div class="stick"></div>
  </li>
  <li class="element">
    <img src='https://dummyimage.com/100x100/4286f4/fff' alt="..." />
    <div class="stick"></div>
  </li>
</ul>
<div>
<div class="desc elm1 hidden visuallyhidden">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      </p>
  </div>
  <div class="desc elm2 hidden visuallyhidden">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      </p>
  </div>
  <div class="desc elm3 hidden visuallyhidden">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      </p>
  </div>
  <div class="desc elm4 hidden visuallyhidden">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      </p>
  </div>
  <div class="desc elm5 hidden visuallyhidden">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      </p>
...

SCSS

@mixin on-circle($item-count, $circle-size, $item-size, $desc-size, $desc-circle-size) {
  position: relative;
  width:  19em;
  height: 19em;
  padding: 0;
  list-style: none;       
  
  > li.element {
    display: block;
    position: absolute;
    top:  50%; 
    left: 50%;
    width:  $item-size;
    height: $item-size;
    margin: -($item-size / 2);
  
    $angle: (360 / $item-count);
    $rot: 0;

    @for $i from 1 through $item-count {
      &:nth-of-type(#{$i}) {
        transform: 
          rotate($rot * 1deg - $angle * 1deg) 
          translate($circle-size / 2) 
          rotate(90deg);
          img {
            transform: rotate(-90deg - $rot * 1deg + $angle * 1deg);
          }
          .desc {
            transform: translate(-80%, -90%)  rotate(-90deg - $rot * 1deg + $angle * 1deg);
          }
      }

      $rot: $rot + $angle;
    }
  }
}
.circle-container {
  @include on-circle($item-count: 8, $circle-size: 32em, $item-size: 8.3em, $desc-size: 12em, $desc-circle-size: 50em); 
  margin: 15em auto 15em;
  img { 
    display: block; 
    max-width: 100%; 
    border-radius: 50%;
    filter: grayscale(100%);
    border: solid 1em #fff;
    transition: .15s;
    -webkit-box-shadow: 0 0 20px #bbbcbe, inset 0 0 20px #bbbcbe;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow:    0 0 20px #bbbcbe, inset 0 0 20px #bbbcbe;  /* Firefox 3.5 - 3.6 */
    box-shadow:         0 0 20px #bbbcbe, inset 0 0 20px #bbbcbe;
    
    &:hover,
    &:active {
      filter: grayscale(0);
    }
  }
  .stick {
    height: 6.5em;
    width: 0.8em;
    background: #bbbcbe;
    display: block;
    position: absolute;
    top: 50%;
    left: 45.18%;
    z-index: -1;
  }
  
  .info {
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    -webkit-box-shadow: 0 0 20px #bbbcbe, inset 0 0 20px #bbbcbe;
    -moz-box-shadow: 0 0 20px #bbbcbe, inset 0 0 20px #bbbcbe;
    box-shadow: 0 0 20px #bbbcbe, inset...

JavaScript

/* var popup = document.querySelector('.popup');
var rect = popup.getBoundingClientRect();

console.log("getBoundingClientRect(): \n" + "x: " + rect.left + "\ny: " + rect.top);
console.log("offset: \n" + "x:  " + popup.offsetLeft + "\ny: " + popup.offsetTop);*/
var p = $( ".circle-container" );
var offset = p.offset();
var modal = document.getElementById('popup1');


// Get the <span> element that closes the modal
var closeButton = document.getElementsByClassName("close")[0];


// When the user clicks on <span> (x), close the modal
closeButton.onclick = function() {
    $("#popup1").removeClass("enable");
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        $("#popup1").removeClass("enable");
    }
}
function getRotationDegrees(obj) {
    var matrix = obj.css("-webkit-transform") ||
    obj.css("-moz-transform")    ||
    obj.css("-ms-transform")     ||
    obj.css("-o-transform")      ||
    obj.css("transform");
    if(matrix !== 'none') {
        var values = matrix.split('(')[1].split(')')[0].split(',');
        var a = values[0];
        var b = values[1];
        var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
    } else { var angle = 0; }

    if(angle < 0) angle +=360;
    if(angle == 0) angle = 0;
    return angle;
}

$( "li.element" ).each(function( index ) {
  $(this).on("click", function(){
      /* var element = $(this).get(0);
      var style = window.getComputedStyle(element);  // Need the DOM object
            var matrix = new WebKitCSSMatrix(style.webkitTransform);
      var angle = getRotationDegrees($(this));
      var left = 0, top = 0;
      var $desc = $("div.desc.elm" + (index + 1));
      if(angle == 0) {
        left = offset.left + element.offsetLeft + matrix.m41 - (($desc.outerWidth() - $(this).outerWidth()) / 2);
        top = offset.top + element.offsetTop + matrix.m42 - $desc.outerHeight() - 10;
      } else if (angle < 180) {
       ...