javascript - CSS & Javascript 效果 : arraning characters justified with different spacing between letters. Mousemove 受影响

Question

我有两个单词“Word”和“Arrangement”，这些字符之间有不同的间距。

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

当我在屏幕上移动鼠标时，我希望字符之间的间距稍微移动。例如，当我向右移动时，左边的间距应该增加，而右边的间距应该变窄。反之亦然。

JSFIDDLE

执行此操作的最佳方法是什么？

---

我什至不知道我这样做是否正确。如果每次页面加载时的间距都是随机的，那就更酷了。只有一个规则。这两个词应该还是可以区分的。就像上面的示例一样，您可以清楚地看到“单词排列”。

亲切的问候，9月88日

Answer 1

您可以使用 JavaScript 来检测鼠标光标并为每个单词添加不同的边距。
我写了这个例子，你可以试试。

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>

编辑:我做了一点改动，让它看起来更好。

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