JSFiddle - React, Tailwind, and code Playground

by gion_13

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus nunc eu massa egestas volutpat. Sed consectetur ultricies sagittis. In sed lacus justo, nec pharetra metus. Maecenas massa orci, lobortis sed faucibus vel, sollicitudin vel metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla venenatis, dolor lacinia auctor porta, ipsum augue auctor dui, sed pellentesque purus massa id dui. Curabitur eu massa viverra diam gravida auctor ut non urna. Proin eget purus a sapien consequat hendrerit ac quis felis. Suspendisse lobortis feugiat orci, non mollis quam dapibus quis. Cras quis est velit, at consequat tortor. Nullam feugiat molestie consequat. Morbi velit libero, viverra blandit faucibus nec, feugiat non arcu. Vivamus ac lectus dui. Sed eleifend dignissim justo sed molestie. Donec sed nisl magna, eget tempus lacus. Maecenas tincidunt tincidunt lacus sit amet tempor. Pellentesque adipiscing elit malesuada tellus pulvinar vitae interdum ligula tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer id consequat quam.</p>

JavaScript

(function($){
    $.fn.textMagnifier = function(settings){
        var o = $.extend({}, $.fn.textMagnifier.defaults, settings);
        //class
        function textMagnifier(el,settings){
            var api = this,
            container = $(el),
            originalHtml = container.html(),
            rawText = container.text(),
            fontSize = container.css('font-size'),
            color = container.css('color'),
            spans,levelCount;
            
            // initialise
            function init(){
                container.html('');
                $.each(rawText.split(''),function(i,char){
                    container.append($('<span></span>').text(char));
                });
                spans = container.find('span');
                resetSpans();
                levelCount = settings.radius / spans.width();
            }
            
            function destroy(){
                container
                    .unbind('.magnifyText')
                    .html(originalHtml)
                    .removeData('magnifyTextApi');
            }
            
            function _getDistanceToSpan(span,p1){
                var p2 = span.offset();
                p2.left += span.width() / 2;
                p2.top += span.height() / 2;
                return Math.sqrt(Math.pow(p2.left-p1.left,2),Math.pow(p2.top-p1.top,2));
            }
            
            function updateSpan(span,distance){
                var percent = distance / settings.radius;
                if(percent > 1)
                    return; // the span is not in range
                var d = span.offset();
                var sin = Math.sin(percent * Math.PI / 2);
                var level = Math.round(distance / (settings.radius / levelCount));
                var distanceFactor = settings.radius / levelCount * level / (distance * 100);
                span
                    .css({
                        'z-index' : Math.round(sin * levelCount),
                     ...