我有两个单词“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

最佳方法是什么?

我不知道我是否在正确的道路上。
如果每个页面加载上的间距都是随机的,它将更加凉爽。
只有一条规则。这两个词应该仍然是可区分的。
像上面的示例一样,您可以清楚地阅读“单词排列”。

亲切的问候,
Sepp88

最佳答案

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

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/

10-05 21:01
查看更多