Fancy input

Jquery animated input

by voodoomonkey

HTML

<script src="http://dropthebit.com/demos/fancy_input/fancyInput.js"></script>
    <div id='wrap'>
        <header>
            <div class='social'></div>
            <menu>
                <button class='active'>Effect 1</button>
                <button>Effect 2</button>
                <button>Effect 3</button>
                <button>Effect 4</button>
                <button>Effect 5</button>
            </menu>
            <menu class='radio'>
                <label>
                    <input type='radio' value='input' name='type' /><span>input</span>

                </label>
                <label>
                    <input type='radio' value='textarea' name='type' /><span>textarea</span>

                </label>
                <div></div>
            </menu>
        </header>
        <div id='content'>
            <section class='input'>
                <div>
                    <input type='text'/>
                </div>
            </section>
            <section class='textarea'>
                <div>
                    <textarea cols='1'></textarea>
                </div>
            </section>
        </div>	
            <a class='by' href='http://dropthebit.com'>dropthebit.com ⋆ Yair Even Or ⋆ 2013</a>

CSS

html {
    height:100%;
}
body {
    height:100%;
    text-align:center;
}
#wrap {
    min-width:600px;
    height:100%;
    position:relative;
    background:-webkit-radial-gradient(#205983, #0A2742);
    background:radial-gradient(#205983, #0A2742);
    overflow:hidden;
}
@font-face {
    font-family:'Fjalla One';
    font-style: normal;
    font-weight: 400;
    src: local('Fjalla One'), local('FjallaOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/fjallaone/v1/rxxXUYj4oZ6Q5oDJFtEd6hsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
* {
    margin:0;
    padding:0;
}
/* body::before{ content:''; display:inline-block; height:100%; vertical-align:middle; } */
 header {
    position:absolute;
    z-index:999;
    top:0;
    left:0;
    width:100%;
    padding:10px 0;
    text-align:center;
}
header menu {
    display:inline-block;
    vertical-align:top;
    overflow:hidden;
    margin:0 12px;
    border-radius:6px;
    box-shadow:0 0 0 6px rgba(0, 0, 0, 0.2);
}
header menu button {
    font-family:'Fjalla One', sans-serif;
    margin:0;
    cursor:pointer;
    color:#333;
    padding:6px 12px;
    text-shadow:0 1px #DDD;
    font-size:.9em;
    float:left;
    border:0;
    border-left:1px solid rgba(0, 0, 0, 0.2);
    box-shadow:0 -20px 20px -20px #777 inset;
    -webkit-transition:.1s;
    transition:.1s;
}
header menu button:hover {
    background-color:#CCC;
}
header menu button:first-child {
    border:0;
}
header menu button.active {
    background-color:#BBB;
    color:#000;
    box-shadow:0 1px 3px #111 inset;
    padding:7px 12px 6px;
}
menu.radio {
    background:#EEE;
    box-shadow:0 -20px 20px -20px #666 inset, 0 0 0 6px rgba(0, 0, 0, .2);
    position:relative;
}
menu.radio > div {
    position:absolute;
    top:2px;
    bottom:2px;
    border-radius:5px;
    left:0;
    z-index:1;
    background:#103555;
    box-shadow:0 16px 0 0 rgba(255, 255, 255, 0.1) inset;
    -webkit-transition:0.2s ease-out;
    transition:0.2s...

JavaScript

$('section :input').val('').fancyInput()[0].focus();

// Everything below is only for the DEMO
function init(str) {
    var input = $('section input').val('')[0],
        s = 'type something... ✌'.split('').reverse(),
        len = s.length - 1,
        e = $.Event('keypress');

    var initInterval = setInterval(function () {
        if (s.length) {
            var c = s.pop();
            fancyInput.writer(c, input, len - s.length).setCaret(input);
            input.value += c;
            //e.charCode = c.charCodeAt(0);
            //input.trigger(e);

        } else clearInterval(initInterval);
    }, 150);
}

init();

$('menu').on('click', 'button', toggleEffect);
$('menu.radio').on('change', 'input', changeForm).find('input:first').prop('checked', true).trigger('change');

// change effects
function toggleEffect(num) {
    var className = '';
    idx = $(this).index() + 1,
    $fancyInput = $('.fancyInput');

    if (idx > 1) className = 'effect' + idx;

    $('#content').prop('class', className);
    $fancyInput.find(':input')[0].focus();

    $(this).addClass('active').siblings().removeClass('active');
}

function changeForm(e) {
    // radio buttons stuff
    var page = this.value,
        highlight = $(e.delegateTarget).find('> div'),
        label = $(this.parentNode),
        marginLeft = parseInt(label.css('margin-left'), 10),
        xPos;

    highlight.css({
        'left': label.position().left + marginLeft,
        'width': label.width()
    });

    // page change stuff
    xPos = '-' + label.index() * 50;
    $('#content').css('transform', 'translateX(' + xPos + '%)');

    setTimeout(function () {
        $('#content').find('.' + page + ' :input')[0].focus();
    }, 100);
}

// social sharing stuff
setTimeout(function () {
    // tweet button
    var tweeter = $('<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>');
    // facebook 'like' button
    var fbLike = $('<iframe class="fbLike"...