JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="floating-share">
  <button onclick="float(this, 0, 0, 100, 100, 0, 360, 0)"class="float-trigger float-btn"><i class="fa fa-link"></i></button>
  <ul class="share-items">
    <li class="floating-item item-heart">
      <a href="javascript:void(0)" class="float-btn">
        <i class="fa fa-heart"></i>
      </a>
    </li>
    <li class="floating-item item-star">
      <a href="javascript:void(0)" class="float-btn">
        <i class="fa fa-star"></i>
      </a>
    </li>
    <li class="floating-item item-wifi">
      <a href="javascript:void(0)" class="float-btn">
        <i class="fa fa-wifi"></i>
      </a>
    </li>
    <li class="floating-item item-bell">
      <a href="javascript:void(0)" class="float-btn">
        <i class="fa fa-bell"></i>
      </a>
    </li>
    <li class="floating-item item-cloud">
      <a href="javascript:void(0)" class="float-btn">
        <i class="fa fa-cloud"></i>
      </a>
    </li>
    <li class="floating-item item-cog">
      <a href="javascript:void(0)" class="float-btn">
        <i class="fa fa-cog"></i>
      </a>
    </li>
    <li class="floating-item item-folder">
      <a href="javascript:void(0)" class="float-btn">
        <i class="fa fa-folder"></i>
      </a>
    </li>
    <li class="floating-item item-paper-plane">
      <a href="javascript:void(0)" class="float-btn">
        <i class="fa fa-paper-plane"></i>
      </a>
    </li>
  </ul>
</div>


<div class="floating-share">
  <button onclick="float(this, 0, 0, 100, 100, 0, 90, 1)"class="float-trigger float-btn"><i class="fa fa-link"></i></button>
  <ul class="share-items">
    <li class="floating-item item-heart">
      <a href="javascript:void(0)" class="float-btn">
        <i class="fa fa-heart"></i>
      </a>
    </li>
    <li class="floating-item item-star">
      <a href="javascript:void(0)" class="float-btn">
        <i class="fa...

SCSS

// variables

$btnSize: 34px;
$btn-color: #607D8B;

body {
  padding-top: 100px;
  background: black;
}

.floating-share {
  position: relative;
  width: 100%;
  height: 50vh;
  justify-content: center;
  align-items: center;
  display: flex;

  .float-btn {
      width: $btnSize;
      height: $btnSize;
      line-height: $btnSize;
      border-radius: 50%;
      text-align: center;
      outline: none;
      border: none;
      padding: 0;
      cursor: pointer;
      display: block;
      transition: all 0.15s ease-in-out;
      position:relative;
      i {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
  }
  .float-trigger {
    position: relative;
    z-index: 100;
    background: $btn-color;
    color: #fff;
    transition: all 0.3s ease;
  }
  .share-items {
    z-index: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .floating-item {
      transform: translate(-50%, -50%);
      transition: all 0.3s ease;
      opacity: 0;
      position: absolute;
      color: #fff;
      transition: all 0.3s ease;
      border-radius: 50%;
     
      .float-btn {
        text-decoration: none;
        color: inherit;
        &:hover {
          transform: scale(1.2);
          box-shadow: 0px 0px 0px 3px rgba(0,0,0,0.2);
        }
      }
    }
    .item-heart .float-btn {background: #f44336}
    .item-star .float-btn {background: #9C27B0}
    .item-wifi .float-btn {background: #3F51B5}
    .item-bell .float-btn {background: #03A9F4}
    .item-cloud .float-btn {background: #8BC34A}
    .item-cog .float-btn {background: #FF9800}
    .item-folder .float-btn {background: #FF5722}
    .item-paper-plane .float-btn {background: #795548}
  }
}


.floating-share.opened {
  .float-trigger {
    transform: scale(1.5);
    box-shadow: 0px 0px 0px 5px rgba($btn-color, 0.3);
  }
}

// animations

@for $i from 1 through 20 {
  $delay: $i * 0.05;
  $animdelay: $i *...

JavaScript

jQuery.fn.semiCircle = function(cx, cy, radius, radiusY, startDegrees, endDegrees, length) {
  if (radiusY === undefined) radiusY = radius;
  if (startDegrees === undefined) startDegrees = 0;
  if (endDegrees === undefined) endDegrees = 360;
  var startRadians = startDegrees * Math.PI / 180,
    endRadians = endDegrees * Math.PI / 180,
    stepRadians = (endRadians - startRadians) / (this.length - length);
  return this.each(function(i) {
    var a = i * stepRadians + startRadians,
      x = Math.cos(a) * radius + cx,
      y = Math.sin(a) * radiusY + cy;
    $(this).css({
      left: x + 'px',
      top: y + 'px'
    });
  });
};


$('.floating-share .floating-item').semiCircle(0, 0, 0, 0, 0, 0, 0);

/* $('.float-trigger').on('click', function() {
  float($(this));

}); */

function float(btn, cx, cy, radius, radiusY, startDegrees, endDegrees, length) {
  var floatingEl = $(btn).parents('.floating-share').find('.floating-item');
  var floatParent = $(btn).parents('.floating-share');

  $(btn).find('.fa').toggleClass('fa-link fa-unlink');
  if (floatParent.hasClass("opened")) {
    floatingEl.semiCircle(0, 0, 0, 0, 0, 0, 0);
    floatParent.removeClass("opened").addClass("closing");
    setTimeout(function() {
      floatParent.removeClass("closing");
    }, 200);
  } else {
    floatingEl.semiCircle(cx, cy, radius, radiusY, startDegrees, endDegrees, length);
    floatParent.addClass("opened").removeClass("closing");
  }
}