3

「単語」と「アレンジメント」という 2 つの単語があり、これらの文字の間にはさまざまな間隔があります。

ここに画像の説明を入力

<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

これを行う最善の方法は何ですか？

これを行う正しい道を進んでいるかどうかさえわかりません。ページの読み込みごとに間隔がランダムであれば、さらにクールです。ルールは 1 つだけです。2 つの単語はまだ区別できるはずです。上記のサンプルのように、「単語の配置」がはっきりと読み取れます。

敬具、 Sepp88

4

4 に答える 4

12

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/

于 2014-04-22T10:16:53.493 に答える
6

以下のフィドルであなたのシナリオを達成しました。

デモ

上記のリンクを確認してください..そうでなければ、それはあなたの要件に何らかのアイデアを与えるのに役立つかもしれません..

そしてここでも言葉や文字をダイナミックに作っています。そのため、入力ボックスに任意の単語や行を入力し、ボタンをクリックして動く文字を生成できます。

これが私が使用したロジックです

脚本：

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;
    }
于 2014-04-22T20:35:31.910 に答える
5

これを行うために二項分布を使用しようとしました。 フィドル

<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>
于 2014-04-28T13:31:43.927 に答える
1

こんにちは、試してみましたが、要件を完全に満たしているかどうかを確認してください 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>
于 2014-04-22T09:17:25.117 に答える