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