I have a two words "Word" and "Arrangement" with various spacing inbetween those characters.

<h1 id="logo">
    <span class="word">
        <span class="w">w</span>
        <span class="o">o</span>
        <span class="r">r</span>
        <span class="d">d</span>
    </span>
    <span class="arrangement">
        <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>
    </span>
</h1>

I want the spacing between the characters to move slightly when I move my mouse along the screen. For example, when I move to the right, the spacing on the left should increase and get tighter on the right. Vice versa.

JSFIDDLE

What is the best way to do this?

I have no idea if I'm even on the right path of doing this. It would be even cooler if the spacing is random on every page load. There is just one rule. The two words should still be distinguishable. Like in the sample above you can clearly read "word arrangement".

Kind Regards, Sepp88

You could use JavaScript to detect the mosue cursor and add different margin to every word.
I write this example, you could try it.

http://jsfiddle.net/emn178/K9AU7/3/

<script>
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) / 2;
        $(this).css('margin-left', margin);
        $(this).css('margin-right', margin);
    });
}

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

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

$(document).ready(function() {
    resize();
});
</script>

<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>

Edit: I did a little change let it looks better.

http://jsfiddle.net/emn178/K9AU7/7/

more