JSFiddle - React, Tailwind, and code Playground

by emn178

HTML

<h1 id="logo">
    <span class="words">
        <span>w</span>
        <span>o</span>
        <span>r</span>
        <span>d</span>
        <span>a</span>
        <span>r</span>
        <span>r</span>
        <span>a</span>
        <span>n</span>
        <span>g</span>
        <span>e</span>
        <span>m</span>
        <span>e</span>
        <span>n</span>
        <span>t</span>
    </span>
</h1>

CSS

h1#logo {
	font-family:Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	text-align: justify;
	font-size:1.8em;
	display:block;
	width:100%;
}

h1#logo:after {
    content: "";
  	display: inline-block;
  	width: 100%;
}

JavaScript

var maxSpacing = 20;
    var screenWidth;

    function mousemove(e)
    {
        var x = e.pageX;
        var elements = $('.words').children();
        var part = screenWidth / elements.length;
        elements.each(function(i) {
            var margin = Math.abs((part * i - x) / screenWidth * maxSpacing);
            $(this).css('margin-right', margin);
        });
    }

    function resize()
    {
        screenWidth = $(document).width();
    }

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

    $(document).ready(function() {
        resize();
    });