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

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

做这个的最好方式是什么？

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

亲切的问候， Sepp88

score 12 · Accepted Answer

您可以使用 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/

score 6 · Accepted Answer

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

演示

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

而且在这里我动态地创建了单词和字符。因此，您可以在输入框中输入任何单词或行，并通过单击按钮生成移动字母。

这是我使用的逻辑

脚本：

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

score 5 · Accepted Answer

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

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

score 1 · Accepted Answer

嗨我试过请检查它是否完全满足你的要求小提琴

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

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

4 回答 4

Related

Reference