CSS & Javascript Effect: arraning characters justified with different spacing between letters. Mousemove influenced

Question

I have a two words "Word" and "Arrangement" with various spacing inbetween those characters.

enter image description here

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

I want the spacing between the characters to move slightly when I move my mouse along the screen. For example, when I move to the right, the spacing on the left should increase and get tighter on the right. Vice versa.

JSFIDDLE

What is the best way to do this?

I have no idea if I'm even on the right path of doing this. It would be even cooler if the spacing is random on every page load. There is just one rule. The two words should still be distinguishable. Like in the sample above you can clearly read "word arrangement".

Kind Regards, Sepp88

I will give you idea.. when user hovers on first element, run a loop from next sibling element.. slowly increasing the gap. if the user hovers on last element then do the looping from previous sibling element. — Mr_Green, Apr 18 '14 at 12:53
I wrote some code just to give you an idea.. [**fiddle**](http://jsfiddle.net/s7QSC/). I am not saying it is the ideal way though. it is just my point of view. — Mr_Green, Apr 18 '14 at 18:06
Thank you, however is this even the best way of doing this? Any other solutions? Maybe inserting ` ` between the letters in order to do that? — matt, Apr 19 '14 at 08:18
yeah sounds good. :). try giving this post bounty. you might get a solution which you are looking for. — Mr_Green, Apr 20 '14 at 15:29
To get a smooth look you should use jQuerys `animate` as well. — Jurik, Apr 22 '14 at 08:29
Hello @matt, do you need the HTML structure to be kept as is? Or are you open to any creative input? — James Wong, Apr 22 '14 at 08:35
There is a exemple of what you can do http://jsfiddle.net/FZAGD/ This is not very smooth and the behavior is strange sometimes but it can maybe give you some ideas. — Needpoule, Apr 22 '14 at 09:17

emn178 · Answer 1 · 2014-04-22T13:31:04.443

You could use JavaScript to detect the mosue cursor and add different margin to every word.
I write this example, you could try it.

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>

Edit: I did a little change let it looks better.

http://jsfiddle.net/emn178/K9AU7/7/

is this also possible so that it never breaks into a second line? — matt, Apr 22 '14 at 15:12
this would be the perfect solution if (when adding `white-space:nowrap;` the type wouldn't overflow the page. The two words should always stay inside the current page width. — matt, Apr 23 '14 at 07:51

score 6 · Answer 2 · answered Apr 22 '14 at 20:35

I have achieved your scenario in the below Fiddle.

Demo

Please check in the above link.. and it might helps you otherwise definitely it will give any idea to your requirement..

And also here I have created the words and characters dynamically. So you can enter any words or line in the input box and can generate the moving letters by clicking the button.

Here is the logic i have used

Script:

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

Chang · Answer 3 · 2014-04-28T16:38:20.087

I had tried to use binomial distribution to do this. 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>

pareshm · Answer 4 · 2014-04-23T04:29:31.930

hi i have tried please check if it full fills your requirement 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>

better you show this in a [Fiddle](http://jsfiddle.net/), so that anyone can easily validate. — Soundar, Apr 22 '14 at 16:29
It should always be visible with the same bounds left and right and within one line. — matt, Apr 23 '14 at 08:48

CSS & Javascript Effect: arraning characters justified with different spacing between letters. Mousemove influenced

4 Answers4