CSS & Javascript 效果：以不同的字母间距排列字符。鼠标移动影响答案

【问题标题】：CSS & Javascript Effect: arraning characters justified with different spacing between letters. Mousemove influencedCSS & Javascript 效果：以不同的字母间距排列字符。鼠标移动影响
【发布时间】：2014-06-02 23:34:07
【问题描述】：

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

【问题讨论】：

我会给你想法..当用户悬停在第一个元素上时，从下一个兄弟元素运行一个循环..慢慢增加差距。如果用户将鼠标悬停在最后一个元素上，则从前一个兄弟元素开始循环。
你能给我一个关于我的 jsfiddle 的例子吗？
抱歉没有时间。如果可以的话我会试试的。
我写了一些代码只是为了给你一个想法..fiddle。我并不是说这是理想的方式。这只是我的观点。
谢谢，但是这是最好的方法吗？还有其他解决方案吗？也许为了做到这一点，在字母之间插入&nbsp;？

标签： javascript html css experimental-design

【解决方案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/

【讨论】：

这也是可能的，因此它永远不会进入第二行吗？
当然，将white-space: nowrap;添加到h1
如果（添加white-space:nowrap; 时，类型不会溢出页面，这将是完美的解决方案。这两个词应始终保持在当前页面宽度内。

【解决方案2】：

我在下面的小提琴中实现了你的场景。

Demo

请检查上面的链接..它可能会对您有所帮助，否则它肯定会为您的要求提供任何想法..

在这里我还动态地创建了单词和字符。所以你可以在输入框中输入任何单词或行，点击按钮就可以生成移动的字母。

这是我使用的逻辑

脚本：

function _mouseEnter(e) {
    var _span = $(this).children(".char");
    var len = _span.length, count = 1;

    _span.eq(0).addClass("padd");
    clearInterval(timer);

    timer = setInterval(function () {
        _span.removeClass("padd");
        _span.eq(count).addClass("padd");
        count++;
        if (count == len) count = 0;
    }, 500);
}

function _mouseLeave(e) {
    clearInterval(timer);
    $(this).children("span").removeClass("padd");
}

CSS：

    .word
    {
        display: inline-block;
        padding-right: 30px;
    }
    .word .char
    {
        color: red;
        position: relative;
        -moz-transition: all .5s linear;
        -webkit-transition: all .5s linear;
        -o-transition: all .5s linear;
        transition: all .5s linear;
    }
    .word .char.padd
    {
        color: blue;
        padding-left: 15px;
        padding-right: 15px;
    }

【讨论】：

【解决方案3】：

我曾尝试使用二项分布来做到这一点。 Fiddle

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

h1#logo span { display: inline-block }
h1#logo span:first-child { margin-left: 0 !important }
h1#logo span:last-child { margin-right: 0 !important }

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    $(function(){
        var $spans = $('#logo span');
        var $h1 = $('#logo');
        var h1pos = $h1.offset();
        var h1Width = $h1.width();
        var contentWidth = 0;   

        $spans.each(function(){ contentWidth += $(this).width() });

        var margin = ( h1Width - contentWidth ) / ( $spans.length - 1 ) / 2 ;

        var count = $spans.length - 1;
        var n = count * 2 - 1;
        var min = 5;
        var l = h1Width - contentWidth - min * ( n + 1 );

        function mousemove(e){
            var x = e.pageX;
            if ( typeof x === 'undefined' || x < h1pos.left || x > h1pos.left + h1Width ){
                $spans.each(function(){
                    $(this).css('margin-right', margin);
                    $(this).css('margin-left', margin);
                });
            } else {
                var p = x / h1Width;

                $spans.each(function(i){
                    if( i == 0 ){
                        $(this).css('margin-right', pmf( n, i, p ) * l + min );
                        $(this).css('margin-left', 0);
                    } else if ( i < count ) {
                        $(this).css('margin-right', pmf( n, 2 * i, p ) * l + min );
                        $(this).css('margin-left', pmf( n, 2 * i - 1, p ) * l + min );
                    } else {
                        $(this).css('margin-right', 0);
                        $(this).css('margin-left', pmf( n, 2 * i - 1, p ) * l + min );
                    }
                });
            }       
        }

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

    })

    function factorial( value ){
        if ( typeof value !== 'number' ) return 0;

        value = Math.abs( Math.floor( value ) );

        for( var ans = 1; value > 0; value-- )
            ans *= value;

        return ans;
    }

    function pmf( n, k, p ){
        var p = p > 1 && 1 || p < 0 && 0 || p;
        return factorial(n)/factorial(k)/factorial(n-k) * Math.pow(p,k) * Math.pow( 1 - p, n - k );
    }
</script>
</head>
<body>
<header>
<h1 id="logo">
    <span class="w">w</span><span class="o">o</span><span class="r">r</span><span class="d">d</span><span class="space">&nbsp;</span><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>
</h1>
</header>
</body>
</html>

【讨论】：

【解决方案4】：

您好，我试过了，请检查它是否完全满足您的要求 Fiddle

    <!doctype html>
    <html>
    <head>
    <script src="jquery-1.11.0.min.js"></script>

    <style>
    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%;
    }

    .word .w { }
    .word .o { padding-left:30px; }
    .word .r { padding-left:10px; }
    .word .d { padding-left:50px; }

    .arrangement .a1 { }
    .arrangement .r1 { }
    .arrangement .r2 { }
    .arrangement .a2 { }
    .arrangement .n1 { }
    .arrangement .g { }
    .arrangement .e1 { }
    .arrangement .m { }
    .arrangement .e2 { }
    .arrangement .n2 { }
    .arrangement .t { }
    </style>
    </head>

    <script>
    $(document).ready(function(){
    var count=0;
        //$(window).on("mousemove",function(e){




          var options = {};
        var oldx = 0;
        var direction = "";
        var stop_timeout = false;
        var stop_check_time = 150;
        $.mousedirection = function (opts) {
            var defaults = {};
            options = $.extend(defaults, opts);
            $(document).bind("mousemove", function (e) {
                var activeElement = e.target || e.srcElement;
                if (e.pageX > oldx) {
                    direction = "right";
                } else if (e.pageX < oldx) {
                    direction = "left";
                }

                clearTimeout(stop_timeout);
                stop_timeout = setTimeout(function () {
                    direction = "stop";
                    $(activeElement).trigger(direction);
                    $(activeElement).trigger({
                        type: "mousedirection",
                        direction: direction
                    });
                }, stop_check_time);

                $(activeElement).trigger(direction);
                $(activeElement).trigger({
                    type: "mousedirection",
                    direction: direction
                });
                oldx = e.pageX;
            });
        }

        $(function () {
        $.mousedirection();
        $(window).bind("mousedirection", function (e) {

            if(e.direction=="left")
            {
                count++;
                $(".word").filter(":first-child").css("margin-left",count+"px");
            }
            else if(e.direction=="right")
            {
                count--;
                $(".word").filter(":first-child").css("margin-left",count+"px");
            }

        });
    });








    });
    </script>
    <body>

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




      <script>

      </script>

      </body>
    </html>

【讨论】：

最好将其显示在Fiddle 中，以便任何人都可以轻松验证。
它应该始终可见，左右边界相同，并且在一行内。