JSFiddle - React, Tailwind, and code Playground

by lsubirana

HTML

<script src="http://www.dialogic.com/src/js/libs/jquery.path.js"></script>
<div class="main">
    <div class="wheel">
        <ul>
            <li><div class="outerCont attribute">Network Congestion</div></li>
            <li><div class="outerCont">Unified Communications</div></li>
            <li><div class="outerCont">Another Thang</div></li>
            <li><div class="outerCont">A Last One</div></li>
            <li><div class="outerCont">Any to any</div></li>
        </ul>
    </div>
    
    
</div>

CSS

ul li {opacity:0;position:absolute;list-style:none;border-radius:150px;width:150px;height:150px;background-color:rgb(240,240,240);border:1px solid #0090CF;text-align:center;}
.wheel{display:inline-block;}

.outerCont	{height:50%; margin-top:60px; font-size: 14px;
    font-family: Arial;font-weight:bold;}
.bubText	{clear:both; height:60px; position:relative;}
.attribute2:after{
    content: '';
    background: #0090CF;
    height: 10px; width: 10px;
    position: absolute;
    bottom: -5px; left: 46%;
    z-index: -1;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    box-shadow: 0 0 6px rgba(0,0,0,0.6);
}

JavaScript

; (function ($) {

    $.fn.wheel = function (options) {
        wheelData = { dir: 0 };
        // This is the easiest way to have default options.
        var settings = $.extend({
            // These are the defaults.
            arc_params: {
                center: [325, 325],
                radius: 250,
                start: 180,
                dir: -1
            },
            openSpeed: 1500,
            spinSpeed:5000
        }, options);

        wheelData.wheel = $(this);

        return this.find('ul').each(function () {
            var $this = $(this)
            begin($this)

        });

        function begin($el) {
            var $lis = $el.find('li')
            var angle = 360 / $lis.length
            $lis.each(function (i) {
                var $this = $(this),
                    end = remainder(180 + (angle * (i + 1)), 360)
                $this.data('start', end)
                var arc_params = $.extend(settings.arc_params, {
                    end: end
                })
                $this.delay((i + 1) * 500).animate({ path: new $.path.arc(arc_params), 'opacity': 1 }, settings.openSpeed, 'swing')
                
            })
            setTimeout(mouseRotate, $lis.length * 500 )
        }

        function mouseRotate() {
            $(this).mousemove(mouse)
        }

        function remainder(a, b) {
            return a > b ? a - b : a
        }

        function mouse(evt) {

            var mouse_x = Math.round((parseInt(evt.offsetX - (wheelData.wheel.width() / 2))) / 10) * 10,
                dir = mouse_x > 0 ? -1 : 1
            if (wheelData.dir === dir) { return }
            wheelData.dir = dir;
            console.log("change direction: " + dir)

            spin();

        }

        function spin() {
            wheelData.wheel.find('li').each(function (i) {
                var $this = $(this)
                $this.stop(true)
                var start = $this.data('start'),
                    arc_params =...