JSFiddle - React, Tailwind, and code Playground

by ohmycode

HTML

<h1 id="logo">
    <span class="w">w</span><span class="o">o</span><span class="r">r</span><span class="d">d</span><span class="space">&nbsp;</span><span class="a1">a</span><span class="r1">r</span><span class="r2">r</span><span class="a2">a</span><span class="n1">n</span><span class="g">g</span><span class="e1">e</span><span class="m">m</span><span class="e2">e</span><span class="n2">n</span><span class="t">t</span>
</h1>

CSS

h1#logo {
    font-family:Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    font-size:1.8em;
    display:block;
    width:100%;
}
h1#logo span {
    display: inline-block
}
h1#logo span:first-child {
    margin-left: 0 !important
}
h1#logo span:last-child {
    margin-right: 0 !important
}

JavaScript

$(function(){
		var $spans = $('#logo span');
		var $h1 = $('#logo');
		var h1pos = $h1.offset();
		var h1Width = $h1.width();
		var contentWidth = 0;   

		$spans.each(function(){ contentWidth += $(this).width() });

		var margin = ( h1Width - contentWidth ) / ( $spans.length - 1 ) / 2 ;

		var count = $spans.length - 1;
		var n = count * 2 - 1;
		var min = 5;
		var l = h1Width - contentWidth - min * ( n + 1 );

		function mousemove(e){
				var x = e.pageX;
				if ( typeof x === 'undefined' || x < h1pos.left || x > h1pos.left + h1Width ){
						$spans.each(function(){
								$(this).css('margin-right', margin);
								$(this).css('margin-left', margin);
						});
				} else {
						var p = x / h1Width;

						$spans.each(function(i){
								if( i == 0 ){
										$(this).css('margin-right', pmf( n, i, p ) * l + min );
										$(this).css('margin-left', 0);
								} else if ( i < count ) {
										$(this).css('margin-right', pmf( n, 2 * i, p ) * l + min );
										$(this).css('margin-left', pmf( n, 2 * i - 1, p ) * l + min );
								} else {
										$(this).css('margin-right', 0);
										$(this).css('margin-left', pmf( n, 2 * i - 1, p ) * l + min );
								}
						});
				}       
		}

		$(window).on('mousemove', mousemove);
		$(window).trigger('mousemove');

})

function factorial( value ){
		if ( typeof value !== 'number' ) return 0;

		value = Math.abs( Math.floor( value ) );

		for( var ans = 1; value > 0; value-- )
				ans *= value;

		return ans;
}

function pmf( n, k, p ){
		var p = p > 1 && 1 || p < 0 && 0 || p;
		return factorial(n)/factorial(k)/factorial(n-k) * Math.pow(p,k) * Math.pow( 1 - p, n - k );
}